Internet Explorer 7 上的背景图像位置答案

【问题标题】：Background Image Position on Internet Explorer 7Internet Explorer 7 上的背景图像位置
【发布时间】：2012-08-28 21:06:50
【问题描述】：

这是我的“简洁”HTML

<html>
<head>
    <style type="text/css">
        body.custom.one_sidebar {
            background:#f5f5f5 url('img/bg/bg-content.png') no-repeat 50% 36.1em;
            overflow-x:hidden;
        }
    </style>
</head>
<body class="custom one_sidebar">
    <div class="header_area"></div>
    <div class="content_area"></div>
</body>
</html>

问题是背景图像位置在 IE7 中不起作用。它适用于 IE8 和几乎所有其他浏览器。需要一些帮助来找出原因。

【问题讨论】：

标签： html background internet-explorer-7 background-position

【解决方案1】：

那是因为你在这个位置上混淆了百分比和 em。对于 IE7，你必须使用相同的 2 倍，percent/px 或 em：

body.custom.one_sidebar {
 background:#f5f5f5 url('img/bg/bg-content.png') no-repeat 50% value%;
 overflow-x:hidden;
}

或

body.custom.one_sidebar {
 background:#f5f5f5 url('img/bg/bg-content.png') no-repeat value_em 36.1em;
 overflow-x:hidden;
}

【讨论】：

那么 50% 应该是中心，改变这对任何一个都有帮助吗？（不知道如何将一个转换为另一个。..）
我知道您的困境，您可以尝试通过将 50% 更改为“em”值来使其居中。试错是你的道路;-)
是的，这对我的目的不起作用。如果屏幕调整大小，它就会消失。

【解决方案2】：

首先，确保您选择了 Doctype，如果没有，它将触发 Quirks 模式，并且 IE 将无法正确（或根本）呈现一些速记背景属性。

尝试在侧边栏 CSS 中添加display: block，以及适当的宽度和高度。当元素没有被严格定义为块元素时，IE 已经知道渲染某些属性的问题。

【讨论】：