使用“margin：0 auto;”在Internet Explorer 8中 [英] Using "margin: 0 auto;" in Internet Explorer 8

问题描述

我正在做一些提前IE8测试的过程，似乎使用margin：0 auto的旧技术;

下面的HTML在FF3，Opera，Safari，Chrome，IE7和IE8兼容中提供了一个居中按钮，但是 NOT 的IE8标准：

 < div style =height：500px; width：500px; background-color：Yellow;> 
< input type =submitstyle =display：block; margin：0 auto; /> 
< / div> 
  

<一个解决方法，我可以添加一个显式的宽度到按钮）。

所以问题是：哪些浏览器是正确的？

（我的想法是所有的浏览器不正确 - 不应该按钮是100％宽度，如果它是显示：块？）

更新：我是一个dunce。因为输入不是块级元素，我应该把它包含在一个带有text-align：center的div中。尽管如此，为了好奇，我仍然想知道按钮是否应该在上面的示例中居中。

对于BOUNTY：我知道我在做例子中做奇怪的事情，正如我在更新中指出的，我应该刚刚对齐它的中心。对于赏金，我想参考回答的规格：

1. display：block，应该
   的按钮是宽度100％？




2. 由于显示为块，应该
   margin：0 auto ;

解决方案 div>

这是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 Block-正常流中未替换的元素描述如何：如果'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块级，替换正常流中的元素。文本中有width的使用值，取决于内联替换的元素。10.3.2内联替换元素的相关部分是：if'width'有一个计算值'auto'，并且元素有一个内在宽度，那么内在宽度就是'width'的使用值。

我猜想CSS方案是IMG元素。

 < div style =height：100px; width：500px; background-color：Yellow;> 
< img style =display：block; margin：0 auto;border =0src =http://stackoverflow.com/content/img/so/logo.pngalt = > 
< / div> 
  

INPUT元素的行为应该相同。

I'm in the process of doing some advance IE8 testing, and it seems that the old technique of using "margin: 0 auto;" doesn't work in all cases in IE8.

The following piece of HTML gives a centered button in FF3, Opera, Safari, Chrome, IE7, and IE8 compat, but NOT in IE8 standard:

<div style="height: 500px; width: 500px; background-color: Yellow;">
    <input type="submit" style="display: block; margin: 0 auto;" />
</div>

(As a work-around I can add an explicit width to the button).

So the question is: which browsers are correct? Or is this one of those cases where the behaviour is undefined?

(My thinking is that all the browsers are incorrect - shouldn't the button be 100% width if it's "display: block"?)

UPDATE: I'm being a dunce. Since input isn't a block-level element, I should have just contained it within a div with "text-align: center". Having said that, for curiosity's sake, I'd still like to know whether the button should or shouldn't be centered in the example above.

FOR THE BOUNTY: I know I'm doing odd things in the example, and as I point out in the update, I should have just aligned it center. For the bounty, I'd like references to the specs that answer:

1. If I set "display: block", should the button be width 100%? Or is this undefined?

2. Since the display is block, should "margin: 0 auto;" center the button, or not, or undefined?

解决方案

It is a bug in IE8.

Starting with your second question: "margin: 0 auto" centers a block, but only when width of the block is set to be less that width of parent. Usually, they get to be the same. That is why text in the example below is not centered.

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <b style="display: block; margin: 0 auto; ">text</b>
</div>

Once the display style of the b element is set to block, its width defaults to the parents width. CSS spec 10.3.3 Block-level, non-replaced elements in normal flow describes how: "If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality." The equality mentioned there is

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

So, normally all autos result in a block width being equal to the width of containing block.

However, this calculation should not be applied to INPUT, which is a replaced element. Replaced elements are covered by 10.3.4 Block-level, replaced elements in normal flow. Text there says: "The used value of 'width' is determined as for inline replaced elements." The relevant part of 10.3.2 Inline, replaced elements is: "if 'width' has a computed value of 'auto', and the element has an intrinsic width, then that intrinsic width is the used value of 'width'".

I guess that the scenario CSS cares about is IMG element. Stackoverflow logo in this example will be centered by all browsers.

<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 element should behave the same way.

这篇关于使用“margin：0 auto;”在Internet Explorer 8中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！