为什么这些<li>标签在WebKit和其他所有内容之间有不同的宽度？</li>

Question

为什么this fiddle中的li元素在WebKit浏览器中高30像素（所需高度），在Firefox和IE中高41像素？

Answer 1

因为您没有在CSS中进行任何重置。

每个浏览器在HTML元素的可视化表示中都有不同的默认设置。因此，实现CSS重置非常有用，可以删除和中和不一致的默认浏览器样式设置。

Answer 2

您只需设置行高。也可以尝试设置li的高度。

.container ul li {
    border: 1px solid #888;
    margin: 8px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 30px;
    height:30px;  //added this
}

这是一个更新的小提琴。 http://jsfiddle.net/aaronj1335/xgxkv/4

Answer 3

给span子女一个正确的line-height解决问题。

小提琴：http://jsfiddle.net/xgxkv/8/