在Internet Explorer 8中使用“利润率:0自动;”

我正在进行一些高级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;” 将按钮居中,还是不居中?


繁花不似锦
浏览 416回答 3
3回答

慕运维8079593

是的,您可以阅读该规范一百次,并结合使用不同的片段,直到您有一个正确的解释-但这正是浏览器供应商所做的,这就是我们处在当今状况下的原因。本质上,如果将100%的宽度应用于元素,则该元素应扩展为其父元素宽度的100%(如果该父元素是块元素)。您将无法再居中,margin: 0 auto;因为它已经占用了可用宽度的100%。要使任何内容居中,margin: 0 auto;您需要定义一个明确的宽度。要使内联元素居中,您可以text-align: center;在父元素上使用,尽管如果父元素有其他子元素,则可能会有不良的副作用。

偶然的你

表单控件是CSS 中的替换元素。10.3.4正常流程中的块级替换元素确定使用的“宽度”值与内联替换元素相同。然后,将非替换块级元素的规则应用于确定边距。因此,表单控件不应拉伸到100%的宽度。但是,它应该居中。它看起来像IE8中的普通错误。如果您设置特定的宽度,它将使元素居中:<input type="submit" style="display: block; width:100px; margin: 0 auto;" />
打开App,查看更多内容
随时随地看视频慕课网APP