ID：6007967
大小：617.00 KB
页数：27页
时间：2017-12-30
2、;margin-left:30px;}Firefox预览结果：IE6预览结果：很明显的，在IE6中，margin-left:30px的边距翻倍成60px了。解决问题：设置display:inline：.myDiv{width:100px;height:100px;border:1pxsolid#000;float:left;display:inline;margin-left:30px;}IE6预览结果：3.上下margin重合：margin是个有点特殊的样式，相邻的margin-left和margin-right是不会重合的，但相邻的ma
3、rgin-top和margin-bottom会产生重合。不管IE还是Firefox都存在这问题。例如：HTML：
4、px的下边距，对下方的div设置了50px的上边距。为了便于观察，这里将div的高度都设为100px。浏览器预览结果：可见，结果不是预期的上下div拉开75px的距离，而是拉开了半个div高度(50px)的距离。解决问题：统一使用margin-top或者margin-bottom，不要混合使用。这并不是技术上的必需，但却是个良好的习惯。4.超链接访问后hover样式不出现：有时候我们同时设置了a:visited和a:hover样式，但一旦超链接访问后，hover的样式就不再出现，这是怎么回事呢？是因为将样式顺序放错了，调整为先a:visit
5、ed再a:hover。关于a标签的四种状态的排序问题，有个简单好记的原则，叫做lovehate原则，即i(link)ov(visited)eh(hover)a(active)e。5.IE6、IE7的hasLayout问题：很多时候，CSS在IE下的解析十分奇怪，明明在Firefox中显示得非常正确，但到了IE下却出现了问题，有的时候，这些问题甚至表现得非常诡异。例如一个比较经典的Bug就是设置border的时候，有时候border会断开，刷新页面或者拖下滚动条的时候，断掉的部分又会连接起来。再比如在IE6&IE7中对元素设置浮动后，其后的元
6、素并未占据这部分空间，造成了IE6&IE7中浮动元素未脱离文档流的假象。也就是说，实际上IE6&IE7浮动元素也脱离了文档流，只是由于其后元素的hasLayout被自动触发而导致的。这里说的hasLayout被触发，即指元素的hasLayout属性为true。下列元素默认hasLayout="true"： ·,
·| , | · ·, |
|---|
