IE7 <li> 项目符号或数字显示在 div 之外答案

【问题标题】：IE7 <li> bullet or number shown outside of divIE7 <li> 项目符号或数字显示在 div 之外
【发布时间】：2012-06-02 00:57:59
【问题描述】：

我遇到了 IE7 列表元素错误的问题。和的项目符号（或数字）显示在页边距之外。如何为 IE 解决这个问题？根据我的阅读，在 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;
}

【问题讨论】：

您有重置样式表吗？如果您不这样做，则可能是导致此问题的原因。

标签： html css internet-explorer html-lists

【解决方案1】：

根据我的阅读，在 IE7 li 中指定高度/宽度时，这似乎是一个问题。

没错。在<ol> 上设置width 而不是<li> 并在<li> 上使用line-height 而不是height。

#create_request ol {
    width: 313px;
}

#create_request li {
    line-height: 23px;
    ...
}

【讨论】：

修复一切，但让这个新错误：stackoverflow.com/questions/6078290/…

【解决方案2】：

IE 可以用 padding/margin 做一些奇怪的事情。我建议为 IE 提供一个单独的 .css 文件：

<!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

然后只需添加 padding-left 或 margin-left 将其撞回原位。

【讨论】：

【解决方案3】：

1) 尝试display: block; 而不是display: list-item;

2) 尝试使用边距（甚至 margin-left:0;）

3) IE7 的 CSS hack 也可用

*+html #create_request li{

     ..... some style corrections here will work for IE7  .....

}

【讨论】：