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

Question

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

stu*_*ith 81 html css internet-explorer-8

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

下面的HTML在FF3,Opera,Safari,Chrome,IE7和IE8 compat中给出了一个居中按钮,但不是 IE8标准:

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

Run Code Online (Sandbox Code Playgroud)

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

所以问题是:哪些浏览器是正确的？或者这是行为未定义的情况之一？

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

更新:我是个笨蛋.由于输入不是块级元素,我应该将它包含在带有"text-align:center"的div中.话虽如此,为了好奇,我仍然想知道按钮是否应该在上面的例子中居中.

对于BOUNTY:我知道我在这个例子中做了一些奇怪的事情,正如我在更新中指出的那样,我应该把它对准中心.对于赏金,我想参考回答的规格:

如果我设置"display:block",按钮的宽度应该是100%吗？或者这是不确定的？
由于显示是块,应该"margin:0 auto;" 中心按钮,或不,或未定义？

Answer 1

小智 155

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

如果没有DOCTYPE,IE将自动进入Quirks渲染模式.有用的:-) (13认同)
如果你在doctype之前有任何东西,那么也会失败,(即评论,启动html标签等等) (7认同)

Answer 2

but*_*oxa 71

这是IE8中的一个错误.

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

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

Run Code Online (Sandbox Code Playgroud)

将b元素的显示样式设置为block后,其宽度默认为父级宽度.CSS规范 10.3.3正常流程中的块级非替换元素描述如何:"如果'width'设置为'auto',则任何其他'auto'值变为'0','width'跟随得到的相等"那里提到的平等

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

因此,通常所有汽车都会导致块宽度等于包含块的宽度.

但是,此计算不应应用于INPUT,它是替换元素.替换元素由正常流程中的10.3.4块级替换元素覆盖.文字说:"'宽度'的使用值是针对内联替换元素确定的." 10.3.2内联的相关部分,替换元素是:"如果'宽度'的计算值为'auto',则element具有固有宽度,然后该固有宽度是'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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 3

Wol*_*lfr 5

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

实质上,当您对元素应用100%的宽度时,如果父元素是块元素,它应该扩展到它的父元素宽度的100%.margin: 0 auto;因为它已经占用了可用宽度的100%,所以你不能再使它居中.

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

Answer 4

Kor*_*nel 5

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

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

"宽度"的使用值确定为内联替换元素.然后应用未替换的块级元素的规则来确定边距.

因此,窗体控件不应拉伸到100%宽度.

但是,它应该集中.它看起来像IE8中的普通错误.如果设置特定宽度,它会使元素居中:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，5 月前
查看次数：	146206 次
最近记录：	7 年，10 月前