CSS：margin 0自動在IE8中工作，但不在chrome中工作

Question

我的css在這里（Fiddle Link） 。

<div id="yearDiv">
        <ul>
            <li><a href="#">2014</a></li>
            <li><a href="#">2012</a></li>
            <li><a href="#">2011</a></li>
            <li><a href="#">2010</a></li>
        </ul>
    </div>


#yearDiv{

    background-color: #eee;
    height: 100%;
    width: 30%;
    margin-left: 3%;
    float: left;
}

#yearDiv ul{

    margin: 0 auto;

}

#yearDiv li{

    list-style: none;
    margin: 15px auto;
    display: block;

}

#yearDiv li a{

    text-decoration: none;
    text-align: center;
    display: block;
    color:#a30f0f;
    font-family:Arial;
    font-size:35px;
    font-weight:bold;
    font-style:normal;
    background: #eee;
    border-color: #7C1D1B #711C17 #6A1F1C #7C1D1B;
    border: 2px solid;
    font-family: Courier New;
    width: 150px;
    height: 50px;

}

#yearDiv li a:LINK, #yearDiv li a:VISITED {



}

#yearDiv li a:HOVER, #yearDiv li a:ACTIVE {



}

在IE 8上，它呈現為

而在chrome上呈現為

在我看來，剩余的余量是行不通的。 我想知道如何在div內獲得鏈接而又不留太多利潤。

Answer 1

你應該試試這個

#yearDiv ul{

    margin: 0 auto;
    padding: 10px;

}

DEMO

Answer 2

邊距不起作用的原因是因為ul和li元素沒有指定的寬度。

最簡單（也是我認為最好）的解決方案是將width屬性從a元素移動到ul元素。

另外，您應該從ul刪除填充。 因此，ul的css變為：

#yearDiv ul{
    margin: 0 auto;
    padding: 0;
    width: 150px;
}

width從a元素中刪除。 結果是： FIDDLE

注意：盡管您希望“按鈕”的寬度固定，以div寬度為中心。 看到馬蒂的回答，我認為我在這個假設中可能是錯誤的。 無論如何，我希望這個答案仍然可以幫助您了解問題的根源，無論最終將使用哪種解決方案。

我的解決方案：給ul一個固定的寬度，以便margin: 0 auto將使它居中。 Maddy的解決方案：根本不指定ul ， li和a的寬度； 給div填充以填充（塊樣式）元素以填充可用空間。 在這兩種情況下，你不應該指定一個寬度li和a元素。