奇填充（仅适用于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

设置的空白填充和畦为0到您的按钮，等等。

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

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

Answer 3

我有类似这样的地方，我需要添加一些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;  
    } 
}