Question

我一直在努力让div容器元素与它的子内容一起居中，并开始变得令人沮丧。我对div的内联样式如下：

    <body id="body1" style="vertical-align: middle; text-align: center">
        <div id="container" style="position: relative; width: 910px; margin: 0px auto;">
             <!---Child Content--->      
    .
    .
.
</div>
    </body>

在IE7中查看这些设置时，div容器偏移到右侧，如下图所示：

enter image description here

为了使它居中，我必须在其位置样式中添加正确的属性，以便将其推向中心：

    <body id="body1" style="vertical-align: middle; text-align: center">
        <div id="container" style="position: relative; right: 425px; width: 910px; margin: 0px auto;">
<!---Child Content--->      
        .
        .
    .
        </div>
    </body>

这解决了IE7的问题：

enter image description here

然而，可以预见的是，在应用上述第二种样式格式时，IE8，Firefox，Chrome等格式化已关闭：

Firefox（Chrome和IE8中的行为相同）

enter image description here

希望这是一个简单的修复，我不明白为什么IE7以不同的方式对待样式。任何帮助表示赞赏。

更新：

@Dan Hardy，漂流 - 如果我能接受你的答案我会的，谢谢你的工作。这是非常奇怪的行为，我想现在我不需要迎合特定的浏览器。

Answer 1

这为修复铺平了道路，但并非严格意义上的修复：

您可以在HTML代码中添加条件浏览器特定语句：

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

基本上你可以做的是将下面的评论添加到你的页面：

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="conditional_ie_7_stylesheet.css" />
<![endif]-->

在这些标签之间，您可以添加必要的样式以抵消特定浏览器上的问题。

正如我所说，这不能解决您的CSS问题，但它提供了另一种选择。

Answer 2

如果您将!ie7放在width属性之后，IE 7以外的浏览器将忽略它：

right: 425px !ie7;

为了更好地解释这一点，请参阅此SO问题和接受的答案：

Bang IE7 - What does it mean?

我留给你来判断这是否太'hacky'，但它在Stack Overflow css中使用。

Answer 3

当您从div中删除position: relative时，能够让原始问题中的html在IE7中正常工作。内容html / css中也存在导致潜在问题的交互，所以如果这不能解决问题，你可以发布你所拥有的内容html / css，它会在屏幕截图中显示问题。有帮助的。

IE8 vs IE7 html格式化

3 个答案: