继续玩CSS…
同样先建立XHTML，四个层嵌入一个层中…
1. 有点特殊的margin
开始...
-
#content {
-
float: left;
-
background-color: #F00
-
}
-
#one {
-
padding: 10px;
-
height: 80px;
-
background-color: #060;
-
width: 80px
-
}
-
#two {
-
margin: 20px;
-
height: 60px;
-
background-color: #060;
-
width: 60px
-
}
-
#three {
-
padding: 10px;
-
margin: 10px;
-
height: 60px;
-
background-color: #060;
-
width: 60px
-
}
-
#four {
-
height: 100px;
-
background-color: #060;
-
width: 100px
-
}
IE6，firefox1.5，opera8.5表现一样，有点特殊的是这样上下坚着排列的两个层距离会取margin并集...
two和three之间的距离是20px，而不是我预想中的20+10=30px...
2.一切从float开始
下面唱主角的是float，似乎各浏览器比我还不懂它究竟是啥意思…
先给#one加一个float: left; 然后…
ff和opera浮动层one挡住了因one浮动而位置上移的two..并把two层中的文字往下挤。
ie6中的one把two向右挤，但又没有挤出一个one的100px宽度来..测了下好象是83px..搞不懂..
接着..给#two加一个 clear:both…ie和opera正常，轮到ff发傻了...
似乎很好的贯彻了margin不影响当前行的高度..
所以当你希望所有的层竖着排列时，尽量别有float这个东东出现。
3. IE双倍浮动边距错误
这个错误是我在发现后google出解决方案来的...本来网上有更好的说明，但舍不得我下面的尝试，还是写出来吧...
-
#one {
-
padding: 10px;
-
height: 80px;
-
background-color: #060;
-
width: 80px
-
}
-
#two {
-
float: left;
-
margin: 20px;
-
height: 60px;
-
background-color: #060;
-
width: 60px
-
}
-
#three {
-
float: left;
-
padding: 10px;
-
margin: 10px;
-
height: 60px;
-
background-color: #060;
-
width: 60px
-
}
-
#four {
-
clear: both;
-
height: 100px;
-
background-color: #060;
-
width: 100px
-
}
然后...
IE中two的左边和three的右边都是双倍的margin..解决方法是在#two和#three中都加上 display: inline;
顺便说一下，横着排列的两个层距离是margin之和，与竖着排列是有区别的。
4.关于IE计算2个div之间的距离时候，会把1px的border计算在内，而mozilla没有；
这是网上很多人认同的说法，我实验了下...
-
#one {
-
padding: 10px;
-
height: 80px;
-
background-color: #060;
-
width: 80px
-
}
-
#two {
-
float: left;
-
margin: 10px;
-
padding: 10px;
-
height: 60px;
-
background-color: #060;
-
width: 60px;
-
display: inline
-
}
-
#three {
-
float: left;
-
height: 100px;
-
background-color: #060;
-
width: 100px
-
}
-
#four {
-
clear: both;
-
height: 100px;
-
background-color: #060;
-
width: 100px
-
}
结果...
看来这个说法是错的，ie6盒模型解析的是正确的。
补充..MS对于IE6对CSS的支持有文章
http://www.microsoft.com/china/MSDN/library/NetComm/webteam08062001.mspx?mfr=true
Post a Comment