嘿,我有一个非常讨厌的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>
我已经在谷歌上搜索过了,但我似乎找不到解决办法,有什么想法吗?
最佳答案
看起来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 */
}
很可能,IE和Firefox的默认值不同。你能把
overflow
元素的高度增加到ul
元素的高度吗?rohancragg评论了一个很好的建议,使用CSS重置文件来规范浏览器的CSS默认值-http://meyerweb.com/eric/tools/css/reset/。
我刚刚在你的元素上发现了
35px
。li
元素将被忽略,您应该改用display: inline;
。关于html - 为什么IE7使用此CSS切断列表项的底部?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/2410343/