IE7 <li> 在div之外顯示的子彈或數字

Question

我遇到了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;
}

Answer 1

從我所看到的，當在IE7 li中指定高度/寬度時，這似乎是一個問題。

那是對的。 設置width上<ol>代替的<li>和使用line-height ，而不是height上的<li>

#create_request ol {
    width: 313px;
}

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

Answer 2

IE可以用填充/邊距做一些奇怪的事情。 我建議為IE使用單獨的.css文件：

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

然后只需添加padding-left或margin-left就可以將其恢復原位。

Answer 3

1）嘗試display: block; 而不是display: list-item;

2）嘗試使用保證金（甚至保證金左：0;）

3）IE7的CSS hack也可用

*+html #create_request li{

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

}