2015-01-12 4 views
2

저는 비디오를 재생하는 슈퍼 기본 웹 페이지를 만들고, Safari를 제외한 모든 브라우저에서 페이지의 가장 가운데에 정렬합니다. 여기서는 Safari가 하단으로 밀려납니다 왼쪽.center align html5 비디오가 Safari에서 작동하지 않습니다.

<!DOCTYPE html> 
<html> 
<link rel='stylesheet' href='style.css'/> 
<head> 
    <title> page title </title> 
    <link rel="icon" type="image/png" href="favicon.png"/> 
</head> 

<body bgcolor="#000000"> 

<div class="video"> 
<iframe src=" /*i'm not including the video link for privacy reasons*/ width="700" height="525"  frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div> 

</body> 

<style type="text/css"> 
.video { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-left: auto; 
    margin-right: auto; 
    transform: translate(-50%, -50%); 
} 
</style> 

</html> 

이전에이 문제가 발생한 사람이 있습니까? 꽤 기본적인 것 같지만, 왜 작동하지 않는지 모르겠습니다. transform 재산 만 -webkit- 접두사로 사파리에서 작동

답변

0

:

.video { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-left: auto; 
    margin-right: auto; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

FIDDLE

당신은 브라우저 지원을 볼 수 Can I Use을 참조 할 수 있습니다

+0

예 이것이 예 그것은 당신에게 대단히 감사합니다 그런 간단한 질문에 대답 할 시간을 가졌습니다. . . :) – mcftdhorappusswrtvo

+0

@mcftdhorappusswrtvo 문제 없습니다. 기꺼이 도와주세요. – jmore009

관련 문제