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

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

此篇记录发出前，记忆中没有看过相关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下效果如下：

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

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

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

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

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

相关推荐