Question

我注意到IE有时在按钮文本周围有很大的填充。它似乎与按钮所具有的文本量成正比。这使得按钮非常难看。

由于国际化问题，我对制作固定宽度的按钮犹豫不决。百分比宽度也是如此。

人们如何处理像按钮这样的DIV样式？

Answer 1

这是一个适用于我的修复：

<!--[if IE]>
<style type="text/css">

input { 
  overflow: visible;
  padding-left:2px;
  padding-right:2px;
}

</style>
<![endif]-->

Answer 2

这就是诀窍：

input[type='button'], input[type='submit'] { overflow: visible; }
/* add above also your desired button padding if you want. */

供参考：

如果你不想使用IE条件评论，因为这个CSS不会影响按钮在其他浏览器上的显示方式。
在IE7上工作，但IE6不支持[type='...']选择器，因此它会忽略这种风格。对于IE6，唯一的方法是将一个类应用于每个按钮，并为此类添加相同的CSS { overflow: visible; }。
IE8不再需要它了，因为他们最终修复了这个。

Answer 3

在你发布这个问题之前我从未注意到这一点 - 但你是对的。按钮上的填充量似乎是文本长度的“百分比”，这意味着当您向按钮添加更多文本时它会变得更宽。

如果只是想要调整行为的按钮，则可以使用：

input[type='button'] {
    overflow: visible;
}

您不需要进行此条件，因为它不会影响其他浏览器中的按钮显示。您可以将规则更改为“提交”以及“按钮”。这将完全删除自动伪装填，并允许您添加自己的样式规则。

Answer 4

我会通过CSS调整按钮的填充。

input {
padding: 0; }

删除填充将限制按钮大小以适合内容。

Answer 5

确保将此doctype添加到页面顶部，它将不再执行此操作：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

您可以阅读此处的内容：http://www.w3.org/TR/xhtml1/但基本上它会告诉您页面要使用哪种HTML。