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

以下HTML给出了FF3,Opera,Safari,Chrome,IE7和IE8兼容的居中按钮,但在IE8标准中为 NOT :



<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 ;”将按钮居中,或
    不是,还是不确定?
  • 最佳答案

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

    09-25 18:12