使用“保证金：0自动；” 在Internet Explorer 8中

Question

我正在进行一些高级IE8测试，似乎旧的使用技巧margin: 0 auto;在IE8中并非在所有情况下都有效。

以下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>

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

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

（我的想法是 所有 浏览器都不正确-如果按钮的“显示：阻止”按钮不应该是100％宽度吗？）

更新：我是笨蛋。 由于输入不是块级元素，因此我应该将其包含在带有“ text-
align：center”的div中。话虽如此，出于好奇的缘故，我仍然想知道按钮是否应该在上面的示例中居中。

赏心悦目的：我知道我在示例中做的很奇怪，正如我在更新中指出的那样，我应该将其居中对齐。 为了悬赏，我希望引用能回答以下问题的规范：

1. 如果设置为“ display：block”，按钮的宽度应为100％吗？ 还是这是不确定的？

2. 由于显示为块，因此应“ margin：0 auto;” 将按钮居中，还是不居中？

Answer 1

这是IE8中的错误。

从第二个问题开始：“ 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’=包含块的宽度

因此，通常所有auto都会导致块宽度等于包含块的宽度。

但是，此计算不应应用于被替换的元素INPUT。替换的元素由 10.3.4正常流程中的块级替换元素
覆盖。那里的文字说：“’宽度’的使用值是根据内联替换元素确定的。” 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>

INPUT元素的行为应相同。