发现一个很有意思的地方， chrome和ie9之前的版本解决思路

发现一个很有意思的地方， chrome和ie9之前的版本

HTML code

<div style="border:1px solid red;width:300px;height:200px;"><div style="border: 1px solid black;background:pink"><h1 style="margin-top: 20px">2</h1></div></div>

如果把第二个div设置一个border， 

那么这个div的背景色就会和第一个div的上边框重叠，

如果不设置这个border的话， 那么这个div的背景色就会和上面空出来一部分， 这部分的大小等于
<h1 style="margin-top: 20px">
这里margin-top设置的大小


这个怎么解释？。

我用ie9没这个情况，ie8和chrome都是这样


[解决办法]
html,body,*{padding:0;margin:0;border:0;}
加在CSS最顶部
[解决办法]
img{display:inline-block;}

查看更多 下一篇