在Internet Explorer 8中使用"margin: 0 auto;"

81

我正在进行一些高级IE8测试,似乎在IE8中使用margin: 0 auto;的旧技术并不总是起作用。

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

(作为一种解决方法,我可以为按钮添加显式宽度)。

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

(我的想法是,所有浏览器都不正确 - 如果按钮是“display: block”,它不应该是100%的宽度吗?)

更新:我是个傻瓜。由于输入不是块级元素,我应该只在具有“text-align: center”属性的div中包含它。话虽如此,出于好奇,我仍然想知道上面的例子中按钮是否应该居中。

对于悬赏:我知道我在示例中做了奇怪的事情,并且正如我在更新中指出的那样,我应该只将其对齐到中心。对于赏金,我想要引用回答以下规范的参考资料:

  1. 如果我设置"display:block",那么按钮应该是100%宽度吗?还是未定义的?

  2. 由于显示为块,因此“margin: 0 auto;”是否应将按钮居中,否则未定义?


你最好赶快:IE8 RTM今天发布,将在大约2小时内提供下载。 - Joel Coehoorn
它仍处于测试阶段,发布之前需要修复的问题很多,其中缺乏完全支持IE8只是其中之一。 - stusmith
12个回答

1

"margin: 0 auto" 只有在父元素具有 "text-align: center" 属性时,才能将元素居中于 IE 中。


0
  1. 假设使用 margin: 0 auto,那么元素应该居中显示,但宽度保持不变——无论计算出的宽度是多少,都会忽略任何边距设置。
  2. 如果将 <INPUT> 标签设置为 display:block,则应使用 margin: 0 auto 居中显示。

有关详细信息,请参见 CSS 2.1 规范中的 Visual formatting model details - calculating widths and margins。相关部分包括:

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

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

最后

如果将 'width' 设置为 'auto',则任何其他 'auto' 值都变为 '0',并且 'width' 遵循由此产生的等式。 如果 'margin-left' 和 'margin-right' 都设置为 'auto',则它们的使用值相等。 这会使元素在包含块的边缘水平居中。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接