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

caiceclb · 发表于 2013-2-7 22:29:16

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

		自动登录	找回密码
密码			立即注册

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

浏览过的版块