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/

我的按钮下的奇数填充（仅限Chrome）/ CSS

3 个答案: