当前位置：首页 → 问答吧 → 请高手帮看一下，每行底部多出余白

请高手帮看一下，每行底部多出余白

时间：2010-09-09

来源：互联网

请高手给看一下
每行在IE下都多出了大面积的余白
找了半天原因，是a标签下的display:block的问题
可是不知道怎样修改

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>xxxxxxxxx</title> <link href="Styles/Style.css" rel="stylesheet" type="text/css" /> <link href="Styles/LeftMenu.css" rel="stylesheet" type="text/css" /> <style type="text/css"> p { line-height: 1.5em; } ul.menu, ul.menu ul { list-style-type:none; margin: 0; padding: 0; width: 15em; } ul.menu a { display:block; text-decoration: none; } ul.menu li { margin-top: 1px; } ul.menu li a { background: #99BCBF; color: #fff; padding: 0.5em; } ul.menu li a:hover { background: #245b9c; color:#FFF; } ul.menu li ul li a { background: #D3E4E5; color: #000; padding-left: 20px; } ul.menu li ul li a:hover { background: #a4c8f3; border-left: 5px #245b9c solid; padding-left: 15px; color: #000; } .code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; } .code code { display: block; padding: 3px; margin-bottom: 0; } .code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; } .indent1 { padding-left: 1em; } .indent2 { padding-left: 2em; } .indent3 { padding-left: 3em; } .indent4 { padding-left: 4em; } .indent5 { padding-left: 5em; } body { margin:0; font-size: 12px; } a:link {font-size:12px; text-decoration:none; color:#000000;} a:visited {font-size:12px; text-decoration:none; color:#000000;} a:hover {font-size:12px; text-decoration:none; color:#FF0000;} a.v1:link {font-size:12px; text-decoration:none; color:#03515d;} a.v1:visited {font-size:12px; text-decoration:none; color:#03515d;} </style> <script src="Scripts/HBLoadJS.js?JsStr=jquery-1.4.1-vsdoc,accordion" type="text/javascript"></script> </head> <body> <table width="156" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="top"> <ul id="accordion" class="menu"> <li><a href="#">系统管理</a> <ul> <li><a href="GoodsOrder/OrderMain.aspx" target="I2">系统账号管理</a></li> <li><a href="#">话务员账号</a></li> <li><a href="#">日志管理</a></li> <li><a href="#">短信邮件模板维护</a></li> <li><a href="#">系统编码维护</a></li> </ul> </li> <li><a href="#">网站管理</a> <ul> <li><a href="#">政策信息管理</a></li> <li><a href="#">广告管理</a></li> <li><a href="#">会员信息管理</a></li> <li><a href="FlashNews/FlashNewsManager.aspx" target="mainFrame">快报管理</a></li> <li><a href="#">个人信息维护</a></li> </ul> </li> <li><a href="#">日常运营管理</a> <ul> <li><a href="#">供应商管理</a></li> <li><a href="#">商品管理</a></li> <li><a href="#">订单管理</a></li> <li><a href="#">投诉管理</a></li> <li><a href="#">营销管理</a></li> <li><a href="#">提货劵管理</a></li> <li><a href="#">仓储管理</a></li> </ul> </li> <li><a href="#">坐席平台</a> <ul> <li><a href="#">话务员帐号管理</a></li> <li><a href="#">商品订购</a></li> </ul> </li> </ul> </td> </tr> </table> </body> </html>
提示：您可以先修改部分代码再运行

作者: china29755 发布时间: 2010-09-09

给li加个宽度然后给li浮动就可以解决这是ie6的一个bug 这个bug出现次数很多的呀有时候 li浮动还是不好用的时候只能浮动ul 希望能帮助你

作者: llqfront 发布时间: 2010-09-09

哈哈哈谢谢楼上的高手
终于解决了

作者: china29755 发布时间: 2010-09-09

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>xxxxxxxxx</title> <link href="Styles/Style.css" rel="stylesheet" type="text/css" /> <link href="Styles/LeftMenu.css" rel="stylesheet" type="text/css" /> <style type="text/css"> p { line-height: 1.5em; } ul.menu, ul.menu ul { list-style-type:none; margin: 0; padding: 0; width: 15em; } ul.menu a { display:block; text-decoration: none; } ul.menu li { margin-top: 1px; } ul.menu li a { background: #99BCBF; color: #fff; padding: 0.5em; } ul.menu li a:hover { background: #245b9c; color:#FFF; } ul.menu li ul li{height:26px;vertical-align:top} ul.menu li ul li a { background: #D3E4E5; color: #000; padding-left: 20px; } ul.menu li ul li a:hover { background: #a4c8f3; border-left: 5px #245b9c solid; padding-left: 15px; color: #000; } .code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; } .code code { display: block; padding: 3px; margin-bottom: 0; } .code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; } .indent1 { padding-left: 1em; } .indent2 { padding-left: 2em; } .indent3 { padding-left: 3em; } .indent4 { padding-left: 4em; } .indent5 { padding-left: 5em; } body { margin:0; font-size: 12px; } a:link {font-size:12px; text-decoration:none; color:#000000;} a:visited {font-size:12px; text-decoration:none; color:#000000;} a:hover {font-size:12px; text-decoration:none; color:#FF0000;} a.v1:link {font-size:12px; text-decoration:none; color:#03515d;} a.v1:visited {font-size:12px; text-decoration:none; color:#03515d;} </style> <script src="Scripts/HBLoadJS.js?JsStr=jquery-1.4.1-vsdoc,accordion" type="text/javascript"></script> </head> <body> <table width="156" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="top"> <ul id="accordion" class="menu"> <li><a href="#">系统管理</a> <ul> <li><a href="GoodsOrder/OrderMain.aspx" target="I2">系统账号管理</a></li> <li><a href="#">话务员账号</a></li> <li><a href="#">日志管理</a></li> <li><a href="#">短信邮件模板维护</a></li> <li><a href="#">系统编码维护</a></li> </ul> </li> <li><a href="#">网站管理</a> <ul> <li><a href="#">政策信息管理</a></li> <li><a href="#">广告管理</a></li> <li><a href="#">会员信息管理</a></li> <li><a href="FlashNews/FlashNewsManager.aspx" target="mainFrame">快报管理</a></li> <li><a href="#">个人信息维护</a></li> </ul> </li> <li><a href="#">日常运营管理</a> <ul> <li><a href="#">供应商管理</a></li> <li><a href="#">商品管理</a></li> <li><a href="#">订单管理</a></li> <li><a href="#">投诉管理</a></li> <li><a href="#">营销管理</a></li> <li><a href="#">提货劵管理</a></li> <li><a href="#">仓储管理</a></li> </ul> </li> <li><a href="#">坐席平台</a> <ul> <li><a href="#">话务员帐号管理</a></li> <li><a href="#">商品订购</a></li> </ul> </li> </ul> </td> </tr> </table> </body> </html>
提示：您可以先修改部分代码再运行

说两点：
1、你的代码没文档声明IE会变成怪癖模式下渲染！
2、新曾样式ul.menu li ul li{height:26px;vertical-align:top}

作者: radom 发布时间: 2010-09-09