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": ·,
·, | · ·, |
---|