发现IE6、IE7下列表li中内联块级元素的错位bug

最新推荐文章于 2019-08-15 19:24:00 发布
最新推荐文章于 2019-08-15 19:24:00 发布
阅读量6.5k 收藏
点赞数
文章标签： ie html xhtml class div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuanghusun/article/details/5898561
版权
Html代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.  <head>  
  4.   <title> new document </title>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  6.   <meta name="author" content="tofishes@163.com" />  
  7.   <meta name="keywords" content="" />  
  8.   <meta name="description" content="" />  
  9.   <style type="text/css">  
  10.     ul { padding:0;margin:0; }   
  11.     li { padding:2px 0; }   
  12.     li li { padding:0; }   
  13.     a { display:inline-block; }   
  14.   </style>  
  15.  </head>  
  16.   
  17.  <body>  
  18.     <ul class="row">  
  19.         <li>  
  20.             <ul>  
  21.                 <li>了款到即发</li>  
  22.                 <li>拉拉拉拉</li>  
  23.                 <li>拉拉拉拉</li>  
  24.             </ul>  
  25.         </li>  
  26.         <li>正常的无display:inline-block;的情况<a href="">这个链接是display:inline-block;</a></li>  
  27.     </ul>    
  28.  </body>  
  29. </html>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="author" content="tofishes@163.com" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
	ul { padding:0;margin:0; }
	li { padding:2px 0; }
	li li { padding:0; }
	a { display:inline-block; }
  </style>
 </head>

 <body>
	<ul class="row">
		<li>
			<ul>
				<li>了款到即发</li>
				<li>拉拉拉拉</li>
				<li>拉拉拉拉</li>
			</ul>
		</li>
		<li>正常的无display:inline-block;的情况<a href="">这个链接是display:inline-block;</a></li>
	</ul>	
 </body>
</html>

 

在ie6/7下 效果如下：

 

错位示意图

 

 

Html代码 复制代码
  1. <li>  
  2.             <ul>  
  3.                 <li>了款到即发</li>  
  4.                 <li>拉拉拉拉</li>  
  5.                 <li>拉拉拉拉</li>  
  6.             </ul>  
  7.         </li>  
<li>
			<ul>
				<li>了款到即发</li>
				<li>拉拉拉拉</li>
				<li>拉拉拉拉</li>
			</ul>
		</li>

 

这行代码是关键，将ul换成div则不会错位，只有这个ul存在就会错位。

 

解决方法就是设置这个ul为display:inline; 或 inline-block;

 

 

转：http://caiceclb.javaeye.com/blog/627895

 

 

 

以及

 

解决IE5、IE6、IE7下列表li中内联块级元素图片/内容块错位bug

http://hi.baidu.com/yxmlantian/blog/item/b66942fc62a9448fb801a078.html等

still
关注
IE6/IE7中li底部4px空隙的Bug
09-25
IE6和IE7浏览器中，当列表项<li>的子元素使用了浮动属性(float)时，会出现一个底部空隙的bug，具体表现为底部出现4px的空间。这个bug的原因在于IE6/IE7处理浮动元素的方式与众不同，导致了这种不期望的空隙。针对此...
html 内联元素和html 块级元素概述及区别
09-28
HTML中的元素分为两种主要类型：块级元素和内联元素，它们在网页布局中扮演着至关重要的角色。理解这两种元素的区别对于创建有效的网页结构至关重要。 **块级元素（Block Elements）**： 1. **特性**：块级元素总是...
IE7.0以下版本列表<li>元素中元素错位解决方法
ForeverCjl的专栏
06-11 1185
HTML: [${ross.parentName}] ${ross.title } [${ross.updateDate}] CSS: .time{float:right} 以上代码会在IE7.0以下time元素与a元素错位，一个在上，一个在下。导致的原因是这种情况下span-time元素的margin-top会自动增加20px左右（具体为什么增加不知道，如果哪位大神知道的话给我留
两个div,都设置未inline-block,可是在IE出现错位问题
weixin_38168559的博客
08-15 97
[实现要求] 红色的和黄色的内容撑开,蓝色包住红黄,不定框居中显示 [遇到问题] chrome显示正常,但是在IE上红黄框会出现错位的问题 [如何解决] 给红色框添加一个overflow:hidden就好了 转载于:https://www.cnblogs.com/chorkiu/p/11360015.html...
HTML+CSS解决ul和li的错位、换行问题
热门推荐
liboqiao1234的博客
02-12 1万+
这篇博客主要是讲如何解决ul和li的一些问题，作为一个CSS大白，作者最近再做一个非常简单的导航栏（一个ul中套4个li，一行）的时候遇到了很多问题。下面将一一讲述。 问题如下： 1.ul中的li如何横向排序？ 2.display:inline、inline-block、block有什么区别？ 3.为何分配好100%后会换行？ 4.为何ul与li会错位？ 1.ul中的li如何横向排序？...
标签 li 是不是块级元素分析
09-28
在IE6和IE7中，`<li>`元素默认的`display`值为`block`，这使其表现出典型的块级元素特征。而在其他A-Grade浏览器（如IE8+，Webkit（Safari和Chrome），Firefox，Opera）中，`<li>`元素的默认`display`值是`list-item...
html内联元素和块级元素的基本概念及使用示例
12-13
块级元素：一般是其它元素的容器，可容纳内联元素和其它块级元素，块级元素排斥其它元素与其位于同一行，可设置宽度(width)高度(height)属性，正常流中的块级元素会垂直摆放。常见块状元素为“div” 内联元素（行内...
多浏览器下IE6 IE7 firefox li 间距问题第1/2页
10-30
1. **内联元素间的默认间距**：在IE6和IE7中，`<a>`标签作为内联元素，默认会有一些额外的间距。这可能是导致问题的一个原因。 2. **浏览器默认样式差异**：不同浏览器对于某些标签的默认样式有所不同，这会导致即使...
HTML标签中li的用法 IE6,7,8和FF没有问题
renpinghao的专栏
04-26 1879
<br /> <br /> <br />1。<ul> 标签定义无序列表。<br />2。<li> 标签定义列表项目。<br /> <br />     <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。<br /> <br />     <br /> <br />    其头部分： ，可以在li里定义：<br /> <br />    background  ，设置其 头部分的内容；同时要对ul进行 list-style-type:none; padding:0; margin:0
UL li在IE7及以下版本问题
fengri5566的专栏
07-24 1685
1、在IE7及以下版本中，UL中不能出现非LI标签，如果出现非LI标签那么，浏览器会自动将非LI标签用靠近它的LI标签包裹住，成为Li中的内容。 昨天做了一个页面，IE7和IE6没有进行测试，结果业务报问题，给出了问题页面截图，一看就知道，应该是IE问题，用IE8访问没有问题，但IE7和IE6就有问题，仔细查看代码，发现没有问题，然后使用IE开发工具查看浏览器解析后的HTML结构，发现了问题，问
IE6、IE7下a标签后面的span元素向右浮动后错位的解决方法
蝈蝈的博客
07-18 2803
把右浮动的span元素放在了a标签之后，会导致在IE6、IE7这些老式浏览器下显示错位的情况，代码如： 关于我们2011-15-15 15:00:45 或 关于我们2011-15-15 15:00:45 正确的写法是：把span元素放在a标签之前，代码如： 2011-15-15 15:00:45关于我们 或 2011-15-15 15:00:45关于我们
ul和li的IE兼容
随记
03-05 559
ul中设置padding-top时，IE6和IE7li会自动继承ul 的padding-top属性，所以padding-top最好在li里设定。
ie6 ie7 的div 对 display:inline-block的解析
佐吾
02-08 4333
项目需要做个投票的样式：如图 看了原来的项目是用table 吧文字和票数条分开的 为了不用table，于是想到了div，为了能在同一行显示，就把div 的样式加上 display:inline-block; 经过一系列的设置后，在ie8 和ff下可以完美的展现了。 在ie6下一看~oh my god ！！票数条和文字不在同一行，再在ie7下看，和ie6一
理解CSS文档流：块级元素与内联元素解析
"本文主要探讨了CSS文档流的概念，以及块级元素(block)和内联元素(inline)的性质和差异。文档流是CSS布局的基础，它规定了元素在页面上的排列方式。块级元素占据整行，内联元素则在同一直线排列，不独占一行。浮动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值