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

Using "margin: 0 auto;" in Internet Explorer 8

提问by stusmith

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.

我正在做一些高级 IE8 测试，似乎旧的使用技术margin: 0 auto;在 IE8 中并不适用于所有情况。

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

下面的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>

(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 allthe browsers are incorrect - shouldn't the button be 100% width if it's "display: block"?)

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

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.

更新：我是个笨蛋。由于输入不是块级元素，我应该将它包含在带有“text-align：center”的div中。话虽如此，出于好奇，我仍然想知道按钮是否应该或不应该在上面的示例中居中。

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?

1. 如果我设置了“显示：块”，按钮的宽度应该是 100% 吗？或者这是未定义的？

2. 由于显示是块状的，应该“margin: 0 auto;” 居中按钮，或不，或未定义？

采纳答案by buti-oxa

It is a bug in IE8.

这是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.

从您的第二个问题开始：“margin: 0 auto”将块居中，但仅当块的宽度设置为小于父项的宽度时。通常，它们是相同的。这就是为什么下面示例中的文本没有居中的原因。

<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 spec10.3.3 Block-level, non-replaced elements in normal flowdescribes 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

一旦 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' = width of containing block

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含块的宽度

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 elementsis: “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'”.

但是，此计算不应应用于 INPUT，它是一个替换元素。替换元素包含在10.3.4 块级，正常流中的替换元素。那里的文字说：“'width' 的使用值是根据行内替换元素确定的。” 10.3.2 内联替换元素的相关部分是：“如果'width' 的计算值为'auto'，并且元素具有固有宽度，则该固有宽度是'width' 的使用值”。

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

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

INPUT 元素的行为方式应该相同。

回答by Pal

Adding <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">solves the issue

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

回答by Wolfr

Yes, you can read the spec a hundred times, and combine different bits and pieces until you have an interpretation that feels right – but that's exactly what the browser vendors did and that's why we're in the situation we are today.

是的，您可以阅读规范一百次，并结合不同的点点滴滴，直到您有一个感觉正确的解释——但这正是浏览器供应商所做的，这就是我们今天处于这种情况的原因。

In essence, when you apply a width of 100% to an element it should extend to 100% of it's parent's width, if that parent is a block element. You can't center it anymore with margin: 0 auto;then since it already takes up 100% of the available width.

本质上，当您将 100% 的宽度应用于元素时，它应该扩展到其父元素宽度的 100%，如果该父元素是块元素。你不能margin: 0 auto;再将它居中，因为它已经占据了可用宽度的 100%。

To center anything with margin: 0 auto;you need to define an explicit width. To center an inline element, you can use text-align: center;on the parent element, although this could have unwanted side-effects if the parent has other children.

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

回答by Kornel

Form controls are replaced elementsin CSS.

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

10.3.4 Block-level, replaced elements in normal flow

The used value of 'width' is determined as for inline replaced elements. Then the rules for non-replaced block-level elements are applied to determine the margins.

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

'width'的使用值根据内联替换元素确定。然后应用非替换块级元素的规则来确定边距。

So the form control should notbe stretched to 100% width.

所以表单控件不应该被拉伸到 100% 宽度。

However, it shouldbe centered. It looks like an ordinary bug in IE8. It centers the element if you set specific width:

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

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

回答by Simon Dyson

As explained by buti-oxa this is a bug with the way IE8 handles replaced elements. If you don't want to add an explicit width to your button then you can change it to an inline-block and center align the contents:

正如buti-oxa 所解释的，这是IE8 处理替换元素的方式的一个错误。如果您不想为按钮添加显式宽度，则可以将其更改为内联块并居中对齐内容：

<div style="height: 500px; width: 500px; background-color: Yellow; text-align: center;">
  <input type="submit" style="display: inline-block;" />
</div>

If you want this to work in older versions of Mozilla (including FF2) that don't support inline-block then you can add display: -moz-inline-stack;to the button.

如果您希望它在不支持内联块的旧版本 Mozilla（包括 FF2）中工作，那么您可以添加display: -moz-inline-stack;到按钮。

回答by Simon Dyson

As far as this being a "bug" with relation to the spec; it isn't. As the author of the post questions, the behaviour for this would be "undefined" since this behaviour in IE only happens on form controls, as per spec:

至于这是与规范相关的“错误”；不是。作为帖子问题的作者，此行为将是“未定义的”，因为根据规范，IE 中的此行为仅发生在表单控件上：

CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental.

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

( http://www.w3.org/TR/CSS21/conform.html#conformance)

( http://www.w3.org/TR/CSS21/conform.html#conformance)

Cheers!

干杯!

回答by zeroasterisk

One more time: we all hate IE!

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

回答by Rouslan Karimov

tried all the above, end up doing this

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

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

回答by Mohammad Naji

Add <!doctype html>at the top of your HTML output.

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

回答by Joel Coehoorn

shouldn't the button be 100% width if it's "display: block"

如果它是“显示：块”，按钮不应该是 100% 宽度

No. That just means it's the only thing in the space vertically (assuming you aren't using another trick to force something else there as well). It doesn't mean it has to fill up the width of that space.

不。这只是意味着它是垂直空间中唯一的东西（假设你没有使用另一个技巧来强制其他东西）。这并不意味着它必须填满该空间的宽度。

I think your problem in this instance is that the inputis not natively a block element. Try nesting it inside another div and set the margin on that. But I don't have an IE8 browser to test this with at the moment, so it's just a guess.

我认为您在这种情况下的问题input是 本身不是块元素。尝试将其嵌套在另一个 div 中并在其上设置边距。但是我目前没有 IE8 浏览器来测试这个，所以这只是一个猜测。