在Internet Explorer 8中使用“利润率：0自动；”

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中。话虽如此，出于好奇的缘故，我仍然想知道在上面的示例中按钮是否应该居中。赏心悦目的：我知道我在示例中做的很奇怪，正如我在更新中指出的那样，我应该将其居中对齐。为了悬赏，我希望引用能回答以下问题的规范：如果设置为“ display：block”，按钮的宽度应为100％吗？还是这是不确定的？由于显示为块，因此应“ margin：0 auto;” 将按钮居中，还是不居中？

Answer 1

是的，您可以阅读该规范一百次，并结合使用不同的片段，直到您有一个正确的解释-但这正是浏览器供应商所做的，这就是我们处在当今状况下的原因。

本质上，如果将100％的宽度应用于元素，则该元素应扩展为其父元素宽度的100％（如果该父元素是块元素）。您将无法再居中，margin: 0 auto;因为它已经占用了可用宽度的100％。

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

Answer 2

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

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

确定使用的“宽度”值与内联替换元素相同。然后，将非替换块级元素的规则应用于确定边距。

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

但是，它应该居中。它看起来像IE8中的普通错误。如果您设置特定的宽度，它将使元素居中：

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