div css图文混排列表设计中的基础问题总结

2020-05-11 08:06:06易采站长站整理

IE6下的“双边距”现象

从上图可以明显看出最左边的两个li的margin-left要明显大于其他的li。更严重的问题,如果每个li是精心设置恰好站好一行的话,那么“双边距”可能把有些li“挤到”下面一行去,导致float drop的问题。
解决的办法也很简单,只要给float的元素添加一个display:inline的样式就可以了。
我在上面的css代码中使用了一个hack(并做了注释),只让IE6来识别,避免”双边距“问题,其他浏览器不识别这个样式。
5.总结
代码中的一部分html的标签设计的并不是特别好,后续想办法持续改进吧。特别是在写样式表的时候,发现良好的html结构是提高设计css效率的重要方面。
其实这个设计比较简单,但是自己看看还是有比较多的地方(float、兼容性、标签语义化等)需要注意,而且越去深挖,越是觉得有必要要mark下,说不定什么时候自己就一不小心掉进”坑“里了。