CSS保证金问题 - 可能的Chrome错误？

Question

我不确定Chrome中是否存在错误，或者我的CSS是否存在问题。似乎正在发生的事情是尽管在.blockmenu li上发布了一个CSS声明：2％！重要的chrome似乎没有正确地呈现百分比。

这是JS小提琴链接 - http://jsfiddle.net/T3bWE/17/

CSS

.blockmenu ul {
    padding: 0px !important;
    margin: 0px !important;
}
.blockmenu li {
    padding: 0px !important;
    margin: 2% !important;
    list-style: none;
    list-style-position: inside;
    display: block;
    position: relative;
    width: 25%;
    float: left;
    display: table;
}
.blockmenu li a {
    height: 150px;
    margin: 10px;
    display: block;
    text-align: center;
    color: #fff;
    display:table-cell;
    vertical-align:middle;
}
.blockmenu li:nth-child(3n-2) a {
    background: #e31937;
}
.blockmenu li:nth-child(3n-1) a {
    background: #002f5f;
}
.blockmenu li:nth-child(3n) a {
    background: #dcdcdd;
    color: #58595b;
}

HTML

<div class="blockmenu">
    <ul>
        <li><a href="#!">item 1</a>
        </li>
        <li><a href="#!">item 2</a>
        </li>
        <li><a href="#!">item 3</a>
        </li>
        <li><a href="#!">item 4</a>
        </li>
        <li><a href="#!">item 5item 5item 5<br>item 5item 5</a>
        </li>
    </ul>
</div>

是Chrome还是我在CSS中遗漏的东西，因为它似乎在其他浏览器中正确呈现，当我调出开发工具时，左边距显示减少，尽管是百分比 - 例如5.641,4.234,2.828,1.453等在firefox中保持一致5.641

以下是Chrome的屏幕截图;

这是Firefox的屏幕截图;

Answer 1

.blockmenu ul li {
    padding: 0px !important;
    margin: 2% !important;
    list-style: none;
    width: 25%;
    display: table-cell;
    float: left;
}
.blockmenu li a {
    height: 150px;
    margin: 10px;
    width: 25%;
    text-align: center;
    color: #fff;
    display: table-cell;
    vertical-align:middle;
}

您有重复/不正确的显示样式，并且您需要为.blockmenu li a声明的宽度。

为了验证它是否有效，我在这里分享你的小提琴：http://jsfiddle.net/f3sGr/