博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
li浮动后增加图片时多出4px问题
阅读量:4129 次
发布时间:2019-05-25

本文共 502 字,大约阅读时间需要 1 分钟。

 

在制作当当的品牌店铺的时候,有如下效果:

 

 

问题:

当鼠标hover上边的时候,下边的li就会上移4px左右。

解决方法:

 

一般这种情况也就是在ie6 和ie7 下出现。

 

设置li vertical-align:top

图片下方的span margin-top : -4px 即可解决此问题。

 

 

另外,网上关于这种问题,还有其它的解决方案,供参考。

 

dd或li或a标签内,插入图片后,下方会增加4PX高度(间距),

1.将图像定义成block (display:block)
2. 给dd或li固定高度,然后overflow:hidden
3.设置 ul 的 font-size:0;
4.设置 img 的 vertical-align: bottom;
5.设置 img 的 margin-bottom: -4px;

其中第4个方法一般是为了解决li里面有双浮 动:

<a>我是a标签,左浮 动</a><span>我是 span,右浮动</span>

比如这里a和span一个浮左一个浮右的时候,li下方就会多出3PX左右的空隙,所以要用到vertical-align: bottom;或hack来解决  。

 

 

转载地址:http://lfkvi.baihongyu.com/

你可能感兴趣的文章
qt中TextField输入框无法输入中文解决办法
查看>>
qt实现点击出现窗口,点击其他任何地方窗口消失
查看>>
QML DropArea拖拉文件事件
查看>>
CORBA links
查看>>
读后感:&gt;
查看>>
ideas about sharing software
查看>>
different aspects for software
查看>>
To do list
查看>>
Study of Source code
查看>>
如何使用BBC英语学习频道
查看>>
spring事务探索
查看>>
浅谈Spring声明式事务管理ThreadLocal和JDKProxy
查看>>
初识xsd
查看>>
java 设计模式-职责型模式
查看>>
构造型模式
查看>>
svn out of date 无法更新到最新版本
查看>>
java杂记
查看>>
RunTime.getRuntime().exec()
查看>>
Oracle 分组排序函数
查看>>
删除weblogic 域
查看>>