`
java-mans
  • 浏览: 11813186 次
文章分类
社区版块
存档分类
最新评论

怎么解决使用li产生的空隙

 
阅读更多

li大家应该不陌生了,一般用在导航的地方或者用来显示商品信息。这样做应该比表格要方便很多的。但是这样做问题就出现了,火狐上还行一般说来火狐上是不会产生间隙了,但是IE上就会有这样的情况,一般是li 之间上下会产生间隙。大概也就3px。

问题出现了,我们总要解决它。网上有好几种方法,例如加个over-flow:clear,display:block.但貌似都不好使。

这里我给大家推荐一种写法,css如下

1.最好先去掉li的list-style

ul

{

list-style:none;

}


2.给li加浮动,大部分情况使用的是左浮动

ul li

{

float:left;

}

这样子代码看上去很完美了,但是IE上还是有空隙,要怎么做呢,这里只需给li加上高度了,至于加多少这个就大家自己去控制了。

这样差不都可以解决80%的li有间隙的问题,剩下的情况还可以在li里加上word-wrap:break-word; 很方便吧!

分享到:
评论

相关推荐

    li中插入img图片间有空隙的解决方案

    总结来说,解决`<li>`中`<img>`图片间空隙的问题,可以采用调整`vertical-align`属性或者设置`font-size: 0`的方法。具体选择哪种方案,应根据实际项目的需求和结构来确定。在实际开发中,可能还需要考虑浏览器兼容...

    IE6/IE7中li底部4px空隙的Bug

    总之,这个IE6/IE7的`<li>`底部4px空隙Bug是由于浏览器解析CSS时的非标准行为导致的,开发者可以通过理解这个Bug的产生条件,并结合使用上述解决方法,来避免或修复这个影响列表布局的问题。在进行跨浏览器兼容性...

    IE浏览器下的图片空隙间距BUG和解决办法.pdf

    总之,解决IE浏览器下的图片空隙间距问题需要理解其产生的原因,并根据具体需求选择合适的修复方法。随着现代浏览器的普及,这个问题已经逐渐减少,但在维护旧网站或兼容旧版IE时,这些解决方案仍然是十分有用的。

    ie6中li插入图片后下方有空隙(经典bug)多种解决方法

    当`<ul>`的`font-size`设置为0时,可以消除因字体基线对齐产生的空隙。需要注意的是,这可能会导致子元素的字体也变为0,所以需要在子元素中重新设定字体大小。 ```css ul { width:774px; overflow:hidden; ...

    前端兼容问题大全

    解决方法是使用统一的方法来处理图片下有空隙产生。 三十五、对齐文本与文本输入框 在IE和FireFox中,对齐文本与文本输入框的处理方式不同。解决方法是使用统一的方法来处理对齐文本与文本输入框。 三十六、LI中...

    li float后IE下有空格

    这可能导致`li`元素在计算其宽度时,没有完全包含`a`元素,从而在`a`元素后面留出了一些空隙。 解决这个问题的一种方法,如描述中所提,是在`a`标签上也添加`float:left`属性。这样,`a`元素会与`li`元素一起浮动,...

    web前端开发基本问题解决

    IE6下为什么图片下方有空隙产生 IE6下这两个层中间怎么有间隙 list-style-image无法准确定位的问题 LI中内容超过长度后以省略号显示的方法 web标准中定义id与class有什么区别吗 如何垂直居中文本 如何对齐文本与文本...

    浏览器兼容性问题

    IE6下图片下有空隙产生 - **问题描述**:在IE6中,图片下方可能会出现不必要的空白。 - **解决方法**:通过设置图片的`vertical-align`属性为`middle`或`top`来消除空白。 ##### 18. 对齐文本与文本输入框 - **...

    浏览器兼容性汇总

    IE6下图片下有空隙产生 - **IE6**: 图片下方可能会出现空白。 - **Firefox等其他浏览器**: 通常表现一致。 **解决方案**: 使用 `display:block` 或为图片添加 `vertical-align:top` 来消除空白。 ##### 18. 对齐...

    css浏览器兼容整理

    1. **IE6下为什么图片下有空隙产生** - IE6中的图片下方可能会出现多余的间隙。可以通过设置`display: block;`和`margin: 0;`来消除间隙。 2. **图片垂直于容器内** - 可以使用`vertical-align: middle;`或`...

    沪教版九年级上册初中化学期末测试卷汇编(8套).docx

    2. 选择题涉及了化学变化与物理变化的区分,如燃放烟花(化学变化,产生了新物质)和石蜡熔化(物理变化,形状改变但物质本身不变)。 3. 题目中“钙”的检测指的是元素检测,不是分子或单质,因为物质由元素组成,...

    初一上册生字词积累.docx

    17. "镶嵌" (xiāng qiàng) 将物体嵌入另一物体的空隙中。 18. "地毯" (tǎn diàn) 用于地面的覆盖物,通常由纤维编织而成。 19. "水藻" (shuǐ zǎo) 水生植物,多见于湖泊和池塘。 20. "看护" (kān hù) 照顾和...

    css之display属性之inline-block布局实现详解

    - **间隙问题**:在`inline-block`元素之间有时会出现4像素的间隙,这是由于换行产生的空白字符导致的。 - **去除空隙的方法**: - 对父元素设置`font-size: 0`,这样空白字符的大小也会变为0,消除间隙。 - ...

Global site tag (gtag.js) - Google Analytics