Safari CSS問題/背景圖片

Question

我有一個全屏幕背景圖像，它保持縱橫比，並在所有瀏覽器中都能正常工作，但在Safari中無法正常工作。我擅長CSS，但在這一點上，我並不確切知道問題所在。看來，Safari瀏覽器有問題保持垂直中心，並創建頂部間隙和底部：

<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中使用實際圖像作爲背景而不是背景圖片，JavaScript解決方案可能更適合您的需求，因爲它不會在設計中引入額外的標記。

退房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')" 
} 

你真的不應該添加各種表格標記爲背景圖片的緣故。