百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> IE7浏览器中li底部多出4px Bug怎么办
分享文章到:

IE7浏览器中li底部多出4px Bug怎么办

发布时间:01/15 来源: 浏览: 关键词:
在ie7浏览器中我们在定义ul li时会发现li之外的margin会多出4px像素了,这个我下面会以图文的方式给各位演示一个例子,下面我们一起来看看。

效果如下

li布局IE7下底部4px Bug的解决方法

我们在页面布局时,很多时候都要使用ul、li元素,但有些布局方式在低版本的ie上却会出现bug,如4px的错位,如图:

IE7浏览器中li底部多出4px Bug怎么办

为什么会出现这种bug,其实是由于li内放了块级元素,并且这些块级元素浮动引起的。

对于这种情况,解决的方法有很多,如设置负的margin、用其他标签代替li等,但这要么需要使用hack或者是条件注释,要么就破坏了结构及语义。

现在,这里有一种简单的解决办法,那就是,在浮动的子元素上加一个vertical-align属性,取值可以为top、middle、bottom,三者均可,这样4px的bug就可以解决了。

一聚教程小编提醒你

这个bug其实是自己操作出来的,bug 不过觉得完全可以不用浮动吗 用inline-block,img,p都inline-block之后再加上vertical-align:middle基本就可以解决了

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有10人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板