【IE6的疯狂之九】li在IE中底部空行的BUG
曾经写过【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题),原文地址:http://www.css88.com/archives/421;
IE6 BUG大全: http://www.css88.com/archives/579
但是这次li在IE中底部出现的不是3像素而是一整条空白行,如图:
HTML代码:
1 |
< ul > |
2 |
< li >< a href = "#" >第1条连接</ a ></ li > |
3 |
< li >< a href = "#" >第2条连接</ a ></ li > |
4 |
< li >< a href = "#" >第3条连接</ a ></ li > |
5 |
</ ul > |
CSS代码:
1 |
* { padding : 0 ; margin : 0 ;} |
2 |
li { } |
3 |
li a { background : #CCC ; border-bottom : 1px #000 solid ; text-decoration : none ; display : block ;} |
4 |
li a:hover { background : #BBB ;} |
查看demo,请使用IE6查看:http://www.css88.com/demo/IE6_bug/ie6-li/ie6-bug.html
IE6中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)时。在这种情况下,列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。(转载请注明出处:http://www.css88.com)
解决方案1:
1 |
* { padding : 0 ; margin : 0 ;} |
2 |
li { } |
3 |
li a { background : #CCC ; border-bottom : 1px #000 solid ; text-decoration : none ; display : block ;zoom: 1 } |
4 |
li a:hover { background : #BBB ;} |
就是在li a 样式中加入zoom:1;
解决方案2:
1 |
* { padding : 0 ; margin : 0 ;} |
2 |
li { display : inline } |
3 |
li a { background : #CCC ; border-bottom : 1px #000 solid ; text-decoration : none ; display : block ;} |
4 |
li a:hover { background : #BBB ;} |
就是在li 样式中加入display:inline ;
解决方法3(不推荐):
1 |
< ul > |
2 |
< li >< a href = "#" >第1条连接</ a ></ li >< li >< a href = "#" >第2条连接</ a ></ li >< li >< a href = "#" >第3条连接</ a ></ li > |
3 |
</ ul > |
或者
1 |
< ul > |
2 |
< li >< a href = "#" >第1条连接</ a ></ li >< li > |
3 |
< a href = "#" >第2条连接</ a ></ li >< li > |
4 |
< a href = "#" >第3条连接</ a ></ li > |
5 |
</ ul > |
就是将<li>标签写成一行;
解决方案4:(感谢.Roc Happyゞ提供的结局方案)
1 |
* { padding : 0 ; margin : 0 ;} |
2 |
li { } |
3 |
li a { background : #CCC ; border-bottom : 1px #000 solid ; text-decoration : none ; display : block ; width : 100% } |
4 |
li a:hover { background : #BBB ;} |
就是在li a 样式中加入width:100%或者一个宽度值;
转载请注明转自《【IE6的疯狂之九】li在IE中底部空行的BUG》
【IE6的疯狂之九】li在IE中底部空行的BUG的更多相关文章
- 【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题)
今天开发项目中碰到一个li在IE中的BUG,先来看设计原型(如图:) 两个红色中间是<li>1px的底边框: 我写的代码如下: ============================== ...
- li在IE中底部空行的BUG
li在IE中底部空行的BUG 但是这次li在IE中底部出现的不是3像素而是一整条空白行,如图:HTML代码: <ul> <li><a href="#" ...
- IE6/IE7中li底部4px的Bug
当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. XHTML <ul class="list"> < ...
- 【IE6的疯狂之十三】IE6下使用滤镜后链接不能点击的BUG
大家可能都知道IE6下使用DXImageTransform.Microsoft.AlphaImageLoader滤镜(用于PNG32 Alpha透明)后链接不能点击的BUG,大家也都知道只要在a标签上 ...
- 【IE6的疯狂之十二】一个display:none引起的3像素的BUG
今天同事给我看了一个display:none引起的3像素的BUG,非常奇怪!从来没碰到过display:none还能引起这种bug. 看代码: <div style="width: ...
- 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG
在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8 ...
- 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG
IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...
- 【IE6的疯狂之七】样式中文注释后引发失效
这是IE6 出现的奇怪现象.这是由于css 和html 的编码不同所引致. 满足下面条件就会引起 注释下面的样式不起作用:1. css有中文注释2. css为ANSI编码3. html为utf-8编码 ...
- 【IE6的疯狂之五】div遮盖select的解决方案
IE6以及一下版本下,选择框Select会覆盖Div中的内容一般情况下,可以将显示的内容放到Iframe中,然后再显示框架内的内容.由于Iframe的可以显示在Select上层,就可以解决这个问题.不 ...
随机推荐
- HTML5 CANVAS制图 基础总结
一.基本绘图 首先,定义2D渲染变量ct(这里用了Jquery库): var ct = $(#canvasId).get(0).getContext('2d'); 以下是绘制各种基本图形的方法: // ...
- PYTHON ASP FRAMEWORK
Python 融于ASP框架 一.ASP的平反 想到ASP 很多人会说 “asp语言很蛋疼,不能面向对象,功能单一,很多东西实现不了” 等等诸如此类. 以上说法都是错误的,其一ASp不是一种语言是 ...
- Asycn/Await 异步编程
Asycn/Await 异步编程初窥(二) 经过总过4天的学习和实践,做完了 WinForm 下 .Net 4.5 的基本异步应用,实现了一个 Http 协议下载的测试程序,为以后使用 .Net ...
- [转]浅谈PCA的适用范围
线性代数主要讲矩阵,矩阵就是线性变换,也就是把直线变成直线的几何变换,包括过原点的旋转.镜射.伸缩.推移及其组合.特征向量是对一个线性变换很特殊的向量:只有他们在此变换下可保持方向不变,而对应的特征值 ...
- LIS 最长递增子序列问题
一, 最长递增子序列问题的描述 设L=<a1,a2,…,an>是n个不同的实数的序列,L的递增子序列是这样一个子序列Lin=<aK1,ak2,…,akm>,其中k1< ...
- CentOS安装Python教程
下载/安装python yum install -y bzip2* #nodejs 0.8.5需要,请安装python前,先安装此模块. wget http://www.python.org/ft ...
- (Java 多线程系列)Java 线程池(Executor)
线程池简介 线程池是指管理同一组同构工作线程的资源池,线程池是与工作队列(Work Queue)密切相关的,其中在工作队列中保存了所有等待执行的任务.工作线程(Worker Thread)的任务很简单 ...
- iOS状态变更
iOS应用状态变更 应用启动周期 当应用启动时,它从未运行状态到活跃或后台状态,简单地过渡未激活状态.作为启动周期的一部分,系统为应用创建一个过程和主进程并在主进程上调用应用的主函数.来自你的Xcod ...
- 使用dom4j解析xml文件
DOM4J 与利用DOM.SAX.JAXP机制来解析xml相比,DOM4J 表现更优秀,具有性能优异.功能强大和极端易用使用的特点,只要懂得DOM基本概念,就可以通过dom4j的api文档来解析xm ...
- OpenRisc-37-OpenRISC的CPU&core的整体架构分析
引言 前面我们分析了ORPSoC的整体架构,并对其子系统进行了深入的分析和了解.但对于ORPSoC的核心模块or1200_top及其内部的core--or1200_cpu模块却鲜有涉及,算是ORPSo ...