Question

我正在进行一些IE8高级测试，似乎使用margin: 0 auto;的旧技术在IE8的所有情况下都不起作用。

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

<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中。话虽如此，出于好奇，我仍然想知道按钮是否应该在上面的示例中居中。

FOR THE BOUNTY：我知道我在示例中做了一些奇怪的事情，正如我在更新中指出的那样，我应该把它对齐到中心。对于赏金，我想参考回答的规范：

如果我设置“display：block”，应该按钮宽度是100％？或者是这个未定义吗
由于显示是阻止，应该 “保证金：0自动;”将按钮居中，或不，或未定义？

Answer 1

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

Answer 2

这是IE8中的一个错误。

从第二个问题开始：“margin：0 auto”使一个块居中，但仅当块的宽度设置为小于父宽度时。通常，他们会变得相同。这就是下面示例中的文本不居中的原因。

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

将b元素的显示样式设置为block后，其宽度默认为父级宽度。 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'=包含的宽度块

因此，通常所有autos都会导致块宽度等于包含块的宽度。

但是，此计算不应该应用于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元素的行为应该相同。

Answer 3

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

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

要使margin: 0 auto;的任何内容居中，您需要定义显式宽度。要使内联元素居中，可以在父元素上使用text-align: center;，但如果父元素有其他子元素，则可能会产生不必要的副作用。

Answer 4

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

10.3.4 Block-level, replaced elements in normal flow

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

因此表单控件不应拉伸到100％宽度。

但是， should 会居中。它看起来像IE8中的普通错误。如果设置特定宽度，它会使元素居中：

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

Answer 5

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

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

如果您希望在不支持内联块的旧版Mozilla（包括FF2）中使用此功能，则可以向该按钮添加display: -moz-inline-stack;。

Answer 6

就这个与规范有关的“bug”而言;事实并非如此。作为帖子问题的作者，这种行为将是“未定义的”，因为IE中的这种行为只发生在表单控件上，按照规范：

CSS 2.1没有定义哪个属性适用于表单控件和框架，或CSS如何使用他们的风格。用户代理可以应用CSS 这些元素的属性。作者建议对待这种支持作为实验。

（http://www.w3.org/TR/CSS21/conform.html#conformance）

干杯！

Answer 7

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

Answer 8

尝试了以上所有内容，最终完成了这个

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

Answer 9

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

Answer 10

按钮不应该是100％宽度，如果它是“display：block”

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

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

Answer 11

如果父元素具有“text-align：center”，则

“margin：0 auto”仅在IE中居中元素。

Answer 12

假设margin: 0 auto，则元素应居中，但宽度保持原样 - 无论计算什么，忽略任何边距设置。
如果您将<INPUT>标记设置为display:block，那么它应该以{{1}}为中心。

有关详细信息，请参阅CSS 2.1规范中的Visual formatting model details - calculating widths and margins。相关位包括：

在块格式化上下文中，每个盒子的左外边缘接触左边包含块的边缘。

和

当内联的总宽度一行上的框小于宽度包含它们的线框，它们的内部的水平分布线框由确定 'text-align'属性。

最后

如果'width'设置为'auto'，则为任何其他   'auto'值变为'0'和'width'   从结果平等开始。

如果两个'保证金左'和   'margin-right'是'auto'，他们使用了   价值是平等的。这是横向的   将元素集中在一起   包含块的边缘。

使用“margin：0 auto;”在Internet Explorer 8中

12 个答案: