[英]IE7 <li> bullet or number shown outside of div
我遇到了IE7列表元素错误的问题。 子弹(或数字)的子弹(或数字)显示在边缘之外。 我如何解决这个问题? 从我所看到的,当在IE7 li中指定高度/宽度时,这似乎是一个问题。 图片可以在这里找到:
火狐:
IE7:
我有一个Meyer重置的样式表。
#create_request li {
display: list-item;
width: 313px;
height: 23px;
background-color: #E3E3E3;
list-style: decimal;
list-style-position: inside;
padding-left: 25px;
padding-top: 5px;
}
#create_request li.alternate {
background-color: white;
}
#create_left li:hover {
width: 356px;
background: url('/images/list_add.png') 100% 100% no-repeat;
background-color: #B0B0B0;
cursor: pointer;
}
从我所看到的,当在IE7 li中指定高度/宽度时,这似乎是一个问题。
那是对的。 设置width
上<ol>
代替的<li>
和使用line-height
,而不是height
上的<li>
#create_request ol {
width: 313px;
}
#create_request li {
line-height: 23px;
...
}
IE可以用填充/边距做一些奇怪的事情。 我建议为IE使用单独的.css文件:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
然后只需添加padding-left或margin-left就可以将其恢复原位。
1)尝试display: block;
而不是display: list-item;
2)尝试使用保证金(甚至保证金左:0;)
3)IE7的CSS hack也可用
*+html #create_request li{
..... some style corrections here will work for IE7 .....
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.