斯芬克斯之谜续——IE下失效的margin-left/right

ONEBOYS — Tue, 26 May 2009 06:20:44 +0000

margin-left/right也会失效？一般很多人遇到的margin失效都是纵向上面的: 一种情况是元素的确不支持margin-top/bottom(参看：关于margin-top/bottom在inline元素（non-Replaced）上不起作用的解释); 另一种情况则是元素产生了margin叠加（参看：如何避开麻烦的margin叠加(margin collapsing)）。那么margin-left/right怎么又会失效的呢？假如看过斯芬克斯之谜-IE私有属性haslayout的困扰那篇文章的童鞋，就会了解了：哦，又是haslayout啊。我们来看看具体的失效代码： <!DOCTYPE html> <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> <title>斯芬克斯之谜续——无效的margin-left/right(ie)</title> <style> .wrap{background:#eee;border:1px solid #ccc;} .cont{border-bottom:2px solid #aaa;margin:0 30px;height:30px;} </style> </head> <body> <div class="wrap"> <div class="cont">热门圈子</div> </div> </body> </html> 我们会发现：.cont的margin:0 30px再IE下失效了。。。好，既然说haslayout的问题，那么，我们知道,height属性会触发haslayout。去除.cont的height试试，果然margin-left/right起效了。不过，不要急，我们可以消除触发子级元素的haslayout来解决失效，也可以给父级元素触发haslyout来解决这个问题：在.wrap上增加属性:zoom:1; 那么，所有谜团都在这里了吗？我们试试，不改动其他属性，去除父级.wrap上的border。我们发现，margin-left/right也不会失效了… (看来，border这个属性，还得多加研究啊。之前也遇到过类似border引起的问题的。。。) haslayout的一点资料可以看这里：On having layout抄录 Related posts:footer居于页面底部。当页面不够长时，居窗口底部当网页内容不够长时，footer将居于窗口的底部。而不是紧跟上部分网页内容。当页面足够长，footer将被挤下，而不是仍然固定在窗口底部。（始终固定在窗口底部的fixed效果看这篇文章：footer始终固定于窗口底部(支持ie6的fixed效果)）。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"...简单效果的简单写法——无缝滚动字幕 <style> *{padding:0;margin:0;font-size:12px;} #wrap{width:300px;background:#eee;} #wrap li{height:22px;line-height:22px;} </style> <div id="wrap" style="overflow:hidden;height:100px;">...三列互适应等高且中列宽度自适应布局的几个方法（圣杯布局）前面写过一篇二列右列宽度自适应布局的四种方法。先扩展出来“三列，左右列宽度固定，中间列宽度适应屏幕”。采用二列布局的四种方法中的最后一种：触发haslayout法。(当然其他方法也可以用,比如把中间列中触发haslayout的zoom:1和为firefox而加overflow:hidden;替换为margin:0 auto;) <!DOCTYPE html> <html> [...] Related posts:

footer居于页面底部。当页面不够长时，居窗口底部当网页内容不够长时，footer将居于窗口的底部。而不是紧跟上部分网页内容。当页面足够长，footer将被挤下，而不是仍然固定在窗口底部。（始终固定在窗口底部的fixed效果看这篇文章：footer始终固定于窗口底部(支持ie6的fixed效果)）。
简单效果的简单写法——无缝滚动字幕
...
三列互适应等高且中列宽度自适应布局的几个方法（圣杯布局）前面写过一篇二列右列宽度自适应布局的四种方法。先扩展出来“三列，左右列宽度固定，中间列宽度适应屏幕”。采用二列布局的四种方法中的最后一种：触发haslayout法。(当然其他方法也可以用,比如把中间列中触发haslayout的zoom:1和为firefox而加overflow:hidden;替换为margin:0 auto;) 左右列固定宽度，中间列宽度自适应...

关于margin-top/bottom在non-Replaced inline元素上不起作用的解释

ONEBOYS — Fri, 27 Feb 2009 07:07:51 +0000

margin-top/bottom have no effect on non-replaced inline elements。（参见css2.1规范）
但是为什么就不支持呢？
本人觉得可以这样解释：

像这样一个结构
xxxxxxxxxxxxxxxx——————

效果大概如下
xxxxxxxxxxxxxxx————-

假如inline元素支持margin-top，而margin-top的参照基准是前一个元素（当然，考虑复杂情况的话，这么说是不正确的,比如前一元素是脱离文档流的元素，或者根本没有前一元素而只有上级元素，等等）。那么给b相对a的设置一个margin-top值，这个效果会是怎么呢？

这样？
xxxxxxxxxxxxxxx
————-

还是这样？
xxxxxxxxxxxxxxx
————-

但不管是怎样，这都和inline元素的定义相悖。inline元素，从字面上就可以理解，他是在(in)一行(line)上的！
这就是为什么inline元素当初设计的时候不让它支持margin-top/bottom。

同样他（非可置换inline元素）也不支持height（和width）。取而代之的是line-height，意思就是行高。因为inline元素是一行行的，定一个height的话，那这到底是整段inline元素的高呢？还是inline元素一行的高呢？都说不过去啊！所以统一都给每行定一个高，这就是line-height了。

虽然no-replaced inline元素都不支持margin属性。
但margin对于可置换inline元素还是有效的.(Replaced element )

例如下，下面的margin-top/bottom就生效了吧.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>可置换inline元素的margin效果</title> <style type="text/css"> *{margin:0; padding:0; } .inputButton{margin-top:100px;} </style> </head> <body> <div style="border:1px solid red;"> <input type="text" class="inputText" /><input type="button" value="提交" class="inputButton" /> </div> </body> </html>

不过，等下，为什么在这里对inputButton设置margin-top后inputText也跟着有了上边距了呢？
其实，对于可置换inline元素的margin作用基线和block元素又不一样，他并非是任意的前面那个元素，而是离他最近的前一个block元素。
而且，对于元素有一个默认的vertical-align值。
ie下有可能是：vertical-align:auto; （但标准css规范中并无auto这个值）
而FF等浏览器下是vertical-align:baseline;（规范中所定义）

我们给input这个可置换inline元素设置个vertical-align:top;看看，前面的inputText是不是就看不出有“上边距”了。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>可置换inline元素的margin效果</title> <style type="text/css"> *{margin:0; padding:0; } input{vertical-align:top;} .inputButton{margin-top:100px;} </style> </head> <body> <div style="border:1px solid red;"> <input type="text" class="inputText" /><input type="button" value="提交" class="inputButton" /> </div> </body> </html>

有时候，margin的值在不同浏览器下会产生不同的结果。
比如这个：

<!DOCTYPE html> <html> <head> <meta charset="utf8" /> <title>可置换inline元素的margin效果</title> <style type="text/css"> *{margin:0; padding:0; } .inputButton{margin-top:-100px;} </style> </head> <body> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div style="border:1px solid red;"> <input type="text" class="inputText" /><input type="button" value="提交" class="inputButton" /> </div> </body> </html>

对比下ie和FF的差别，我们会发现在，ＦＦ下这个margin负值似乎没起作用啊。
其实是vertical-align值（有默认值）在不同浏览器下解释有差别的缘故。
你可以修改input的vertical-align值做下测试。

小结line-height和vertical-align line-height可以应用在所有元素上。但尽管line-height可以加在block元素上，实际起作用的却是内部的inline元素或textnode节点(也体现了它的继承性质)。 line-height对非可置换inline元素的影响...
input(button)的空隙按钮中的文字和边缘都是有一段默认距离的：
...
未知大小图片在已知容器中居中以下是一些从网上收集来的各种适用于”未知尺寸图层的垂直居中”方法

CSSASS » margin

斯芬克斯之谜续——IE下失效的margin-left/right

关于margin-top/bottom在non-Replaced inline元素上不起作用的解释