`
caiceclb
  • 浏览: 239438 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

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

XHTMLCSSHTML 
阅读更多

此篇记录发出前，记忆中没有看过相关bug的描述。

 

开发中遇到，对此问题做了简单的代码还原：

 

<!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下 效果如下：

 

错位示意图

 

  

<li>
			<ul>
				<li>了款到即发</li>
				<li>拉拉拉拉</li>
				<li>拉拉拉拉</li>
			</ul>
		</li>

 

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

 

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

 

  • 大小: 4.4 KB
分享到：
| 参考资料写了一个生成缩略图的类
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics