我正在做一些IE8的高级测试,似乎使用margin: 0 auto;的旧技术并不能在IE8中的所有情况下都起作用.

以下HTML提供了FF3、Opera、Safari、Chrome、IE7和IE8 Comat格式的居中按钮,但IE8标准格式为NOT:

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

(作为一种变通方法,我可以为按钮添加明确的宽度).

所以问题是:哪些浏览器是正确的?或者这是行为不明确的 case 之一?

(我的 idea 是all%浏览器是错误的——如果按钮是"显示:块",那么按钮不应该是all%宽度吗?)

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. 一百

推荐答案

这是IE8中的一个错误.

从第二个问题开始:"边距:0自动"将块居中,但仅当块的宽度设置为小于父块的宽度时.通常情况下,它们是一样的.这就是为什么下面示例中的文本没有居中.

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

一旦b元素的显示样式设置为挡路,其宽度默认为父元素的宽度.CSS spec 10.3.3 Block-level, non-replaced elements in normal flow描述了如何:"如果‘width’被设置为‘auto’,则任何其他‘auto’值将变为‘0’,并且‘width’将从所产生的相等中跟随."这里提到的平等是

‘左边距’+‘边框左宽’+‘左填充’+‘右边框宽’+‘右边距’=包含挡路的宽度

因此,通常情况下,所有汽车都会导致挡路宽度等于包含挡路的宽度.

但是,此计算不应应用于输入,因为输入是一个被替换的元素.替换的元素包含在10.3.4 Block-level, replaced elements in normal flow个元素中.其中的文字写道:"使用的‘宽度’值取决于内联替换的元素."10.3.2 Inline, replaced elements的相关部分是:"如果‘宽度’的计算值为‘自动’,且元素具有固有宽度,则该固有宽度为‘宽度’的使用值".

我猜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>

输入元素的行为应该相同.

Css相关问答推荐

无法瞄准元素

Css-如何隐藏WP管理菜单上没有css类的第4<;li&>

使用最小高度和边框使阴影DOM中的元素达到自定义元素高度的100%,如果溢出,还可以zoom 父元素

如何剪切一个正方形以便我可以绘制追逐边框?

如何向 Highcharts 迷你图添加具有淡入淡出效果的线性渐变?

Firefox未正确设置SVG的父div的宽度

为什么所有选项卡都没有显示在 React 的 MUI 选项卡组件中?

CSS 网格 - 具有独立可滚动区域的两列布局

使用 React 和 Flexbox 文本溢出框外

css ::part 伪 Select 器 Chrome 兼容性?

在 React Native 中创建背景

Tailwind Box-shadow

创建一条淡出/在各个方向变得透明的线

Rails 7引擎如何使未编译的样式表可用于托管应用程序?

页脚上方的图像分隔线使用 ::before 伪元素

绝对位置和溢出:隐藏

如何知道哪个 HTML 元素导致了垂直滚动条

为什么 CSS 中的光标:指针效果不起作用

使图像具有响应性 - 最简单的方法

CSS:怎么说 .class:last-of-type [类,不是元素!]