html - CSS 边距问题 - 可能是 chrome 错误？

Question

我不确定 Chrome 中是否存在错误，或者我的 CSS 是否存在问题。似乎正在发生的事情是，尽管在 .blockmenu li of margin: 2% !important chrome 上发布了 CSS 声明，但它似乎没有正确呈现百分比。

这是 JS fiddle 链接 - 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 声明的宽度。

为了验证它是否有效，我在这里 fork 了你的 fiddle :http://jsfiddle.net/f3sGr/