列表项在ie7中无法正常扩展的问题
2010年07月18日 12:50
|
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ie7中诡异的列表项隐藏问题</title> <style type="text/css"> /* CSS Document */ body,ul,li{margin:0;padding:0;} body { font:12px/1.5 Arial, Tahoma, Helvetica, sans-serif; } .description{color:#800000;font-size:14px;border:1px solid gray;} .service { float:left; width:258px;/*去掉宽高试试，我们也有宽高的需求*/ height:250px; overflow:hidden; border:1px solid green; } ul { float:left; clear:left;/*去掉这个看看局部有什么影响*/ margin:4px 0 0 24px; list-style:none outside none; } li { float:left; clear:left; padding-left:32px; white-space:nowrap; overflow:hidden;/*去掉这个试试，问题是这个我们需要啊*/ border:1px solid green; } </style> </head> <body> <p class="description">这是ie7下的列表问题，其实有序列表存在同样的问题。起初我以为去掉li的overflow属性就能解决掉这个问题。但是我的列表项要图标，超出高度部分要隐藏，因此这是不可以去掉的。好吧，我们把service包含框去掉，毕竟列表项与它没多大关系。去掉ul的包含框service后，我们发现问题果然不存在了。为什么呢?nnd,竟然是我把宽高限制给去掉了。事实上，如果给li设置了溢出隐藏的属性，而外包含框设定了宽高的话，在ie7中列表项很可能会出现无法正常包含其内容的现象，即使我们已经给li设置了浮动。那么这个外包含框到底是怎样的外包含框呢？ul设定了宽高就会有问题，service设定了宽高就有问题，service的爸爸设定宽高还会有问题，即使service设定浮动属性。另外列表项的文字显示也与该问题有一定关系。最后的一个列表项就不存在这个问题。</p> <div class="service"> <ul> <li><a href="#">恢复QQ好友和群好友和群vvvv</a></li> <li><a href="#">申请QQ帐号</a></li> <li><a href="#">申请密码保护</a></li> <li><a href="#">找回QQ帐号</a></li> <li><a href="#">QQ安全问题求助</a></li> <li><a href="#">客服中心</a></li> </ul> <ul> <li><a href="#">申请QQ帐号</a></li> <li><a href="#">申请密码保护</a></li> <li><a href="#">找回QQ帐号</a></li> <li><a href="#">恢复QQ好友和群好友和群vvvv</a></li> <li><a href="#">QQ安全问题求助</a></li> <li><a href="#">客服中心</a></li> </ul> </div> <div class="service"> <ul> <li><a href="#">恢复QQ好友和群好友和群vvvv</a></li> <li><a href="#">申请QQ帐号</a></li> <li><a href="#">申请密码保护</a></li> <li><a href="#">找回QQ帐号</a></li> <li><a href="#">QQ安全问题求助</a></li> <li><a href="#">客服中心</a></li> </ul> <ul style="float:left;clear:none;"> <li><a href="#">申请QQ帐号</a></li> <li><a href="#">申请密码保护</a></li> <li><a href="#">找回QQ帐号</a></li> <li><a href="#">恢复QQ好友和群好友和群vvvv</a></li> <li><a href="#">QQ安全问题求助</a></li> <li><a href="#">客服中心</a></li> </ul> </div> <div class="service"> <ul> <li><a href="#">恢复QQ好友和群好友和群vvvv</a></li> <li><a href="#">申请QQ帐号</a></li> <li><a href="#">申请密码保护</a></li> <li><a href="#">找回QQ帐号</a></li> <li><a href="#">QQ安全问题求助</a></li> <li><a href="#">客服中心</a></li> </ul> </div> <div class="service"> <ul> <li><a href="#">申请QQ帐号</a></li> <li><a href="#">申请密码保护</a></li> <li><a href="#">找回QQ帐号</a></li> <li><a href="#">恢复QQ好友和群好友和群vvvv</a></li> <li><a href="#">QQ安全问题求助</a></li> <li><a href="#">客服中心</a></li> </ul> </div> <div class="service"> <ul> <li><a href="#">申请QQ帐号</a></li> <li><a href="#">申请密码保护</a></li> <li><a href="#">找回QQ帐号</a></li> <li><a href="#">客服中心</a></li> </ul> </div> </body> </html> |
