在IE按钮中删除额外的填充

Question

在我的网站上，有很多按钮。在Chrome中查看时，按钮宽度恰好适合动态按钮文本，但在IE中，我可以看到左右两侧都产生了额外的填充...

是否有任何CSS规则可以让我带走这些填充？感谢。

Answer 1

可能会有点晚，但是当我今天搜索到同样的问题时，我找到了this question。显然，这不是真正的填充（在某种意义上它不能被padding:0px关闭），而是我们都非常喜欢IE的奇怪怪异之一。 （注意假填充如何与按钮文本长度O_o一起缩放）。幸运的是，有一个简单的解决方案，如here所述。

基本上你只需要在按钮上添加overflow:visible;（我不需要额外的width:auto;，如上所述）。不要问 - 这绝对不是你认为应该做的，但是......这是IE Land，规则在那里不同。请注意，当您的按钮位于表格单元格内时，这显然不起作用。

我想CSS重置可能已经解决了这个问题，因为有人已将此包含在某些全局声明中。只需添加此答案，就如何以及为何提供更多信息。

永不放弃，人们 - 我们的孩子将会看到一个没有IE怪癖的世界......人们可以希望。

Answer 2

您可以使用重置css ，因为它可以避免浏览器不一致。

请参阅http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/

访问http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/以获取reset.css

Answer 3

通过额外语句显示来管理以避免额外的间距：块;在CSS中如此：

.menu button{
    display:block;
    width:100%;
    padding:0;
}

请注意，我没有使用width：auto，因为它不是我的选项 - 按钮为空，宽度取自父div。