logo标签列表

在Internet Explorer 8中使用"margin: 0 auto;"

htmlcssinternet-explorer-8
81

我正在进行一些高级IE8测试，似乎在IE8中使用margin: 0 auto;的旧技术并不总是起作用。

以下HTML代码可以在FF3、Opera、Safari、Chrome、IE7和IE8兼容模式下使按钮居中，但不会在IE8标准模式下居中:


<div style="height: 500px; width: 500px; background-color: Yellow;">
    <input type="submit" style="display: block; margin: 0 auto;" />
</div>

（作为一种解决方法，我可以为按钮添加显式宽度）。

所以问题是：哪些浏览器是正确的？还是这是那种行为未定义的情况之一？

（我的想法是，所有浏览器都不正确 - 如果按钮是“display: block”，它不应该是100％的宽度吗？）

更新：我是个傻瓜。由于输入不是块级元素，我应该只在具有“text-align: center”属性的div中包含它。话虽如此，出于好奇，我仍然想知道上面的例子中按钮是否应该居中。

对于悬赏：我知道我在示例中做了奇怪的事情，并且正如我在更新中指出的那样，我应该只将其对齐到中心。对于赏金，我想要引用回答以下规范的参考资料：

  1. 如果我设置"display:block"，那么按钮应该是100％宽度吗？还是未定义的？

  2. 由于显示为块，因此“margin: 0 auto;”是否应将按钮居中，否则未定义？

你最好赶快：IE8 RTM今天发布，将在大约2小时内提供下载。 - Joel Coehoorn
它仍处于测试阶段，发布之前需要修复的问题很多，其中缺乏完全支持IE8只是其中之一。 - stusmith
12个回答
156

添加 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 可以解决这个问题。

13
如果没有文档类型声明，IE浏览器会自动进入怪异渲染模式。 有帮助的 :-) - Andy McCluggage
7
如果在文档类型声明之前有其他内容（例如注释、起始HTML标签等），也会导致失败。 - Shanimal
也使用了Bootstrap破坏了所有布局。 - user956584
71

这是IE8中的一个bug。

回答你的第二个问题：当块级元素的宽度小于其父元素的宽度时，“margin:0 auto”可以使其居中。通常情况下，它们的宽度相同。这就是为什么下面的示例中文本没有居中的原因。

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <b style="display: block; margin: 0 auto; ">text</b>
</div>

一旦将b元素的显示样式设置为块，其宽度默认为父级宽度。CSS规范10.3.3正常流中的块级非替换元素描述了如何：“如果'width'设置为'auto'，则任何其他'auto'值变为'0'，并且'width'遵循结果相等。”那里提到的平等是
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含块的宽度
因此，通常所有自动结果都会导致块宽度等于包含块的宽度。
然而，这个计算不应该应用于INPUT，因为它是一个替换元素。替换元素由10.3.4正常流中的块级替换元素所涵盖。文本中说：“'width'的使用值与内联替换元素相同。” 10.3.2内联替换元素的相关部分是：“如果'width'的计算值为'auto'，并且元素具有固有宽度，则该固有宽度是'width'的使用值”。
我想CSS关心的情况是IMG元素。在这个例子中，Stackoverflow标志将被所有浏览器居中。
<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <img style="display: block; margin: 0 auto; " border="0" src="http://stackoverflow.com/content/img/so/logo.png" alt="">
</div>

输入元素应该以相同的方式运作。

5

表单控件在CSS中是替换元素。

10.3.4正常流中的块级替换元素

'宽度'的使用值与内联替换元素一样确定。然后应用非替换块级元素的规则以确定边距。

因此，表单控件不应该被拉伸到100％宽度。

但是，它应该居中。在IE8中似乎存在一个普通的错误。如果您设置特定的宽度，则会将其居中：

<input type="submit" style="display: block; width:100px; margin: 0 auto;" />
5

是的，你可以看规范一百遍，并结合不同的部分直到你有一个感觉正确的解释 - 但这正是浏览器厂商所做的，也是我们今天面临的局面。

实质上，当你将一个元素的宽度应用为100%时，如果该父元素是块级元素，则应扩展到其父元素的100％宽度。然后你不能再使用 margin: 0 auto; 居中了，因为它已经占据了可用宽度的100％。

要使用 margin: 0 auto; 居中任何内容，你需要定义一个明确的宽度。要居中内联元素，可以在父元素上使用 text-align:center;，但如果父元素有其他子元素，则可能会产生意想不到的副作用。

3

正如buti-oxa所解释的那样，这是IE8处理替换元素时出现的错误。如果您不想为按钮添加显式宽度，则可以将其更改为内联块，并使内容居中对齐：

<div style="height: 500px; width: 500px; background-color: Yellow; text-align: center;">
  <input type="submit" style="display: inline-block;" />
</div>

如果您希望此功能在不支持内联块的旧版本Mozilla（包括FF2）中正常工作，则可以将 display: -moz-inline-stack; 添加到按钮中。

2

尝试了以上所有方法，最终做了这个。

<div style="width:100%; background-color:red; text-align:center;">
        <div style="width:900px; margin:0 auto; background-color:blue;">
            hello
        </div>
    </div>
2

再说一遍：我们都讨厌IE！

<div style="width:100%;background-color:blue;">
    <div style="margin:0 auto;width:300px;background-color:red;">
        Not Working
    </div>
</div>

<div style="width:100%;background-color:green;text-align:center;">
    <div style="margin:0 auto;width:300px;background-color:orange;text-align:left;">
        Working, but dumb that you have to use text-align
    </div>
</div>
2
在你的HTML输出顶部添加<!doctype html>。
2
就此与规范有关的“错误”而言，这并不是。正如帖子作者所质疑的那样，在IE中仅在表单控件上发生了这种行为，因为根据规范：

CSS 2.1未定义应用于表单控件和框架的属性或CSS如何用于对其进行样式设置。用户代理可以将CSS属性应用于这些元素。建议作者将此类支持视为实验性。

( http://www.w3.org/TR/CSS21/conform.html#conformance )

干杯！

1
按钮如果设置为"display: block"，宽度不应该是100%吗？
不是的。这只是表示在垂直方向上它是空间中唯一的元素（假设你没有使用其他技巧来强制添加其他元素）。这并不意味着它必须填满该空间的宽度。
我认为在这种情况下，你的问题是因为元素本身不是块级元素。尝试将其嵌套在另一个
元素内，并在那个元素上设置边距。但是我目前没有IE8浏览器来测试，所以这只是一个猜测。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接