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“hack”吗？

- SammyFM

---

请确保在您的CSS样式表中将“body”和“html”的边距和填充重置为0。 - Kristy

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

出于背景图像的考虑，您真的不应该添加各种表格标记。

- Graham Conzett