专注于discuz,uchome,dedecms等各类PHP程序仿站(二次开发和模板制作)。

« »
2012-09-12CSS+HTML

3,039 阅读

li margin列表的外边距BUG

前面时间做的一个项目客户找我,说网页没有对齐。开始说是Ie8,TT,搜狐浏览都不行,所以以为是IE8不行,可是一对比发现和我的IE8差别很大,仔细问了后发现 是这他的浏览器是向下兼容,所以就是IE7了。

本来在做这个页面的时间,就有发现IE8和IE6有差别,没有对齐,但是除了发现Discuz官方默认的.cl样式在Ie6下有高度后,没有发现其它问题,所以就通过处理BUG的方法私愤网页对齐了,但是忘了看IE7了。

用IETester上的DEBUGBAR一查看,发现是UL的高度不对:代码如下:

<style type=”text/css”>
li{height:21px;margin:2px 0;}
</style>
<ul>
<li>ssssssssss</li>
<li>ssssssssss</li>
<li>ssssss</li>
<li>wwwwwwwwwwww</li>
</ul>

本来UL应该为100PX的,但是在firfox下通过firbug一看,只有90PX,IE8和IE6也差不多,一算正好是4*21+(4-1)*2,也就是说li之间的margin发生了重叠,最后一个li的margin-bottom没有起作用;但是在IE7中去是102,不知道为什么会多出2PX。于是在前端群一问,才知道这个是通用的BUG,应该用内边距padding来代替。还有就是line-height高度超过hegiht时会出现不兼容的问题.

最后用padding代替margin,去除line-height后终于恢复了正常!

 

原创文章如转载,请注明:转载自火跃工作室
本文网址:http://www.huoyue.org/li-margin-bug

日志信息 »

该日志于2012-09-12 14:55由 火跃 发表在CSS+HTML分类下, 你可以发表评论。除了可以将这个日志以保留源地址及作者的情况下引用到你的网站或博客,还可以通过RSS 2.0订阅这个日志的所有评论。

相关日志 »

  • 暂无相关日志

没有评论

发表评论 »