Safari CSS 문제/배경 이미지

Question

전체 화면 배경 이미지가 있는데, 가로 세로 비율을 유지하고 모든 브라우저에서 정상적으로 작동하지만 Safari에서는 작동하지 않습니다. 나는 CSS를 잘 하긴하지만이 시점에서 나는 그 문제가 정확히 무엇인지 모른다. 사파리 상단의 간격과 바닥을 문제 유지 수직 중심을 가지고 만드는 것 같다

<div id="bg"> 
    <div style="display: table-cell"> 
     <table cellpadding="0" cellspacing="0"> 
      <tr> 
       <td class="loading"><img src="images/home.jpg" /></td> 
      </tr> 
     </table> 
    </div> 
</div> 

CSS :

html,body,#bg,#bg table,#bg td { 
    width:100%; 
    height:100%; 
    overflow:hidden; 
    position: relative 
    } 

#bg div{ 
    position:absolute; 
    width:200%; 
    height:200%; 
    top:-50%; 
    left:-50% 
    } 

#bg td{ 
    vertical-align:middle; 
    text-align:center 
    } 

#bg img{ 
    min-height:50%; 
    min-width:50%; 
    margin:0 auto; 
    display: table 
    } 

모든 CSS CR 여기 해킹?

Answer 1

CSS에서 배경 이미지 대신 실제 이미지를 배경으로 사용하려는 경우 디자인에 불필요한 마크 업을 발생시키지 않으므로 자바 스크립트 솔루션이 더 적합 할 수 있습니다.

체크 아웃 jQueryMaxImage : http://www.aaronvanderzwan.com/maximage/ 여기에 내가 쓴 그 하나, jquery.FullScreenBG : https://github.com/huntedsnark/jquery.fullScreenBG

당신은 CSS 번호 플러스 비를 사용하여 할 수있는 방법이 스크립트와 함께하지 않으려면 호환성을위한 표준 CSS :

html { 
    background: url(images/yourImage.jpg) no-repeat center center fixed; 

    /* CSS3 */ 
    background-size: cover; 

    /*other browser specific */ 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 

    /* non-standard for IE */ 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.yourImage.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourImage.jpg', sizingMethod='scale')" 
} 

배경 이미지를 위해 모든 종류의 표 마크 업을 추가하면 안됩니다.