html - 我的按钮下的奇数填充（仅在 Chrome 中）/ CSS

Question

我的问题很简单，在 Chrome 中为什么我的按钮下有几个像素的填充：

<div id="menubar">
    <div id="menu">
        <div class="button">
            <Button>Button 1</Button>
        </div>
        <div class="button">
            <Button>Button 2</Button>
        </div>
        <div class="button">
            <Button>Button 3</Button>
        </div>
        <div class="button">
            <Button>Button 4</Button>
        </div>
    </div>
</div>

<div id="menubar">
    <div id="menu">
        <div class="button">
            <Button>Button 1</Button>
        </div>
        <div class="button">
            <Button>Button 2</Button>
        </div>
        <div class="button">
            <Button>Button 3</Button>
        </div>
        <div class="button">
            <Button>Button 4</Button>
        </div>
    </div>
</div>
<div id="menubar">
    <div id="menu">
        <div class="button">
            <Button>Button 1</Button>
        </div>
        <div class="button">
            <Button>Button 2</Button>
        </div>
        <div class="button">
            <Button>Button 3</Button>
        </div>
        <div class="button">
            <Button>Button 4</Button>
        </div>
    </div>
</div>

#menubar {
    width: 100%;
    height: 100px;
    display: table;
    table-layout:fixed;
    border:1px #ff0000 solid;
}
#menu {
    display: table-row;
}
#menu .button {
    display: table-cell;
    height:100%;
}
#menu .button Button {
    display:table-cell;
    width: 100%;
    height:100%;
}

http://jsfiddle.net/vPkNd/8/

按钮应占据容器的整个高度。这在 Mozilla 中工作得非常好，但在 Chrome 中有这种奇怪的填充。我已经尝试在任何地方删除填充和边距。

任何人？

Answer 1

改变这种风格：

#menu .button Button {
    display:table-cell;
    width: 100%;
    height:100%;
    margin:0px;
    padding:0px;
    border:0px;
}

Answer 2

我有一个类似的问题，我需要添加一些 Chrome 特定的 CSS 来解决这个问题。添加这个 CSS 应该可以修复 Chrome，并且不理会 IE 和 FF。

/* This CSS code is only used by chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #menu .button button {
        display:table-cell;
        width: 100%;
        height:100%;
        border:0px;
        margin:0px;
        padding:0px;    
    }
}

Answer 3

将按钮的边距填充和边框设置为 0，例如。

#menu .button button {
display:table-cell;
width: 100%;
height:100%;
border:0px;
margin:0px;
padding:0px;    
}

http://jsfiddle.net/vPkNd/13/