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

Question 1

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

下面的HTML的一块给出了在FF3，歌剧，Safari，铬，IE7居中按钮，IE8 COMPAT，但不是在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;” 将按钮居中，还是不居中？

Question 2

这是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元素的行为应相同。

Question 3

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

Question 4

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

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

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

Question 5

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

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

所使用的作为用于内联替换元素确定的“width”的数值。然后，将非替换块级元素的规则应用于确定边距。

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

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

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

Question 6

正如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;到按钮。

Question 7

就与规范有关的“错误”而言；不是。作为发布问题的作者，此行为将是“未定义的”，因为按照规格，IE中的此行为仅在表单控件上发生：

CSS 2.1没有定义哪些属性适用于表单控件和框架，也没有定义如何使用CSS设置样式。用户代理可以将CSS属性应用于这些元素。建议作者将这种支持视为实验性的。

（http://www.w3.org/TR/CSS21/conform.html#conformance）

干杯!

Question 8

再过一次：我们都讨厌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>

Question 9

尝试了以上所有方法，最终做到了

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

Question 10

<!doctype html>在HTML输出的顶部添加。

Question 11

如果按钮是“ display：block”，则按钮的宽度不应为100％

不。这只是意味着它是垂直空间中唯一的东西（假设您也没有使用其他技巧在其中强迫其他东西）。这并不意味着它必须填充该空间的宽度。

我认为在这种情况下，您的问题input是并非原生于block元素。尝试将其嵌套在另一个div中，并在其上设置边距。但是我目前没有IE8浏览器可以对此进行测试，所以这只是一个猜测。

Question 12

如果父元素具有“ text-align：center”，则“ margin：0 auto”仅在IE中将元素居中。

Question 13

假定margin: 0 auto元素应该居中，但宽度保持原样（无论计算出的宽度如何），而无需考虑任何边距设置。
如果将<INPUT>标签设置为display:block，则标签应居中margin: 0 auto。

有关更多详细信息，请参见视觉格式模型详细信息-根据CSS 2.1规格计算宽度和边距。相关的位包括：

在块格式化上下文中，每个框的左外边缘与包含块的左边缘接触。

和

当一行上的内联框的总宽度小于包含它们的行框的宽度时，它们在行框内的水平分布由'text-align'属性确定。

最后

如果将'width'设置为'auto'，则其他所有'auto'值将变为'0'，并且'width'将根据结果相等。

如果“ margin-left”和“ margin-right”均为“ auto”，则它们的使用值相等。这使元素相对于包含块的边缘水平居中。