为什么 IE7 用这个 CSS 切断列表项的底部？答案

【问题标题】：Why is IE7 cutting off the bottom of list items with this CSS?为什么 IE7 用这个 CSS 切断列表项的底部？
【发布时间】：2010-03-10 02:09:45
【问题描述】：

嘿，我有一个非常烦人的 IE7 错误，我正在努力解决。列表项的底部被截断：

IE7
Image in IE7 http://img291.imageshack.us/img291/9363/picture16u.png

火狐
Image in Firefox http://img704.imageshack.us/img704/246/picture17lk.png

这是 CSS：

/* begin buttons */

ul.buttons { /* general settings */                       
margin-left: 0;                                              
margin-bottom: 0em;                                              
margin-right: 0;                                              
margin-top: .0em;                                              
float: left;                                              
height: 23px;                                             
text-shadow: 0px 0px;                       
text-align: left; /* set to left, right or center */ /* set margins as desired */ /* set font as desired */
list-style-type: none; /* THIRD number must change with respect to padding-top (X) below */
}

ul.buttons li { /* do not change */
display: inline;
height: 35px;  
}

ul.buttons li img {
margin-right: 7px;
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 { /* settings for selected tab */
border-bottom: 1px solid #fff; /* set border color to page background color */
background-color: #fff; /* set background color to match above border color */
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a { /* settings for selected tab link */
background-color: #fff; /* set selected tab background color as desired */
color: #000; /* set selected tab link color as desired */
position: relative;
top: 1px;
padding-top: 4px; /* must change with respect to padding (X) above and below */
}

ul.buttons li a { /* settings for all tab links */                                 
border-bottom-color: #4c9a01;                                                                  
border-bottom-width: 1px;                                                                  
border-bottom-style: solid;                                                                  
letter-spacing: .1em;                                                                  
color: white;                                                                  
padding-left: 8px;                                 
padding-bottom: 4px;                                 
padding-right: 8px;                                 
padding-top: 5px;                                 
font-size: .75em; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */ /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #94c909; /* set unselected tab background color as desired */ /* set unselected tab link color as desired */
margin-right: 8px; /* set additional spacing between tabs as desired */
text-decoration: none;
}

和html：

<ul class="buttons">
  <li class="tab1"><a href="index.html">Dashboard</a></li>
  <li class="tab2"><a href="index2.html">My Leases</a></li>
  <li class="tab3"><a href="index3.html">Guide</a></li>
</ul>

我用谷歌搜索了这个，但我似乎找不到解决方案，有什么想法吗？

【问题讨论】：

糟糕，我忘记了火狐的截图：火狐：img704.imageshack.us/img704/246/picture17lk.png
@Thomas：我为你添加了你的图片，这样人们就不必单独导航来比较了。
html 的 sn-p 也会有帮助...
这里是 HTML：
谢谢。 p.s.最好将 html 放在答案中，以便格式很好。

标签： html css internet-explorer-6 internet-explorer-7

【解决方案1】：

看起来li 元素被ul 元素的高度（23px）截断：

ul.buttons { /* general settings */                        
margin-left: 0;                                               
margin-bottom: 0em;                                               
margin-right: 0;                                               
margin-top: .0em;                                               
float: left;                                               
height: 23px;  /* <--- here */                                             
text-shadow: 0px 0px;                        
text-align: left; /* set to left, right or center */ /* set margins as desired */ /* set font as desired */ 
list-style-type: none; /* THIRD number must change with respect to padding-top (X) below */ 
}

很可能，默认的overflow 值在 IE 和 Firefox 中有所不同。您可以将ul 高度增加到li 元素的35px 高度吗？

rohancragg 评论了一个很好的建议，即使用 CSS 重置文件来规范化浏览器 CSS 默认值 - http://meyerweb.com/eric/tools/css/reset/。

我刚刚在您的li 元素上发现了display: inline;。 height 被 inline 元素忽略，您应该改用 inline-block。

【讨论】：

答案和我一样，但更好。我要补充一点 - 当浏览器之间的默认值不同时，一个好的技术是使用 css 重置技术将它们全部设置为相同的默认值集 meyerweb.com/eric/tools/css/reset
是的，我已经在 ul.buttons 上尝试了所有不同的溢出值
如果对您有帮助，您可以在实际页面上查看错误（以及我尚未整理的其他一些错误）：current-post.com/qmail/email.html
@Thomas：当我将 HTML 添加到您的问题中时，我实际上发现了问题的原因 - 请参阅我的最新更新。
@Thomas：我的开发人员工具刚刚开始工作。我检查了一下，实际上是子 a 元素的高度不正确（因为 a 元素默认是内联的）。我可以通过将 display: block; 设置为 a 元素来修复它。

【解决方案2】：

首先，安装IE Development Tools。它就像 Fire Bug，可以让您随时更改 CSS。

其次，更改直播站点中的CSS，找到问题所在。

第三，更改 CSS 并在 Firefox 中测试。如果它在 Firefox 中看起来仍然很好，你就完成了，否则在你的 CSS 中创建一个 IF IE 语句，如下所示：

<!--[if IE 7]>
Special instructions for IE here
<![endif]-->

【讨论】：

我有一个单独的 IE7 样式表，这就是我一直在玩的东西——你们是对的，我不需要 UL 上的高度定义，但它仍然不能解决剪裁问题。

【解决方案3】：

第一个猜测是一个浏览器忽略了ul 的高度，而使用了li 的高度。为什么需要在ul.buttons 上指定比ul.buttons li 更小的高度？

【讨论】：