此篇记录发出前,记忆中没有看过相关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;