CSS教程:li标记在IE下产生间距

2016-02-20 00:18 6 1 收藏

下面请跟着图老师小编一起来了解下CSS教程:li标记在IE下产生间距，精心挑选的内容希望大家喜欢，不要忘记点个赞哦！

【 tulaoshi.com - Web开发】

当li元素设置了高度，且li内元素浮动时会触发该bug。

styleli{ background-color: green; height: 20px; }li a { float: left; }li span { float: right; }/styleullia href=""aaa/aspanbbb/span/lilia href=""aaa/aspanbbb/span/li/ul
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

解决方法：li设置css vertical-align: bottom;

styleli{ background-color: green; height: 20px; vertical-align: bottom; }li a { float: left; }li span { float: right; }/styleullia href=""aaa/aspanbbb/span/lilia href=""aaa/aspanbbb/span/li/ul
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

上边的方法一般都会解决问题，但是许多时候许多未知的原因，还会导致间距问题的出现。试试以下方法：
1.定义行高 line-height
2.设置隐藏 overflow:hidden
3.li增加浮动属性 float

来源:http://www.tulaoshi.com/n/20160220/1631629.html

上一篇： CSS制作网页技巧:单图片按钮实例
下一篇： Win10系统如何在不返回桌面的情况下快速启动桌面中的应用程序

看过《CSS教程:li标记在IE下产生间距》的人还看了以下文章更多>>

DIV+CSS 中UL,LI的运用

标签： Web开发

在做导航条或产品目录的样式都差不时习惯用到ul，在做圆角这样的图形我也喜欢，用到他们可以最小化减少DIV的套用。但有几个地方需要在CSS控制，不然会出现左边会出现很大的空边。下面是登陆窗口的CSS代码，为了避免DIV的嵌套，所以运用了DIV.开始未对ul进行定义，只对ul li进行定义，结果左边空出很大的空隔，看来偷懒是不行的。 ...

在CSS中去掉li前面的黑色圆点

标签： Web开发

在CSS中经常会使用到li标签，默认情况下使用li时，会在文字前面自动加上一个黑色的小圆点，有时候会觉得这个圆点多余，所以要去掉。下面介绍几种常用的方法。方法一： ul li style="list-style-type:none;"百度/li li style="list-style-type:none;"雅虎/li li ...

IE CSS Bug

标签： Web开发

最让人头痛的当数IE，特别是IE6。搞定了IE6，基本也就能称霸半个江山了。搞定了IE，也相当于占领了7、80%的领地。你想做一个统治页面兼容的主么？反正我是想的。作为一名前端，我们通常要做的就是让页面在各系统A-Grade浏览器，甚至网站浏览份额0.1%以上的浏览器上良好显示。当然，还有性能问题。不过，今天要说的是样式的兼容问题。在IE/Mo...

标记语言——网页应用CSS样式

标签： Web开发

点击这里返回脚本之家 HTML教程栏目．想浏览CSS教程请点这里。上文：标记语言精简标签。Chapter 10 应用CSS 在第一部分主要的焦点放在标记语法的例子上，也探讨了如何在标签上应用CSS进行设计,指定样式细节.在第二章,我们将讨论几种把CSS应用到一份文档,网站,甚至是单一标签上的做法.除此之外也会讨论怎么对早先版本浏览器隐藏CSS内容,让...

CSS教程(7)：网页段落行间距控制的实例

标签： Web开发

本文主要讲解如何用CSS控制网页段落行间距的三个实例：1、使用百分比设置行间距，2、使用像素值设置行间距，3、使用数值来设置行间距。 1、使用百分比设置行间距本例演示如何使用百分比值来设置段落中的行间距。 html head style type="text/css" p.small {line-height: 90%} p.big {line-height: 200%} /style /head body p ...

查看更多精彩>>