css - IE9 quirks mode input type=button width padding is proportional to length of text，如何挤压？

Question

我有一个按钮渲染问题。我在 IE9 怪癖模式。它是 html 框架(不是 iframe)内的遗留代码，目前我无法选择怪癖模式。我已经删除了所有的 css 和 javascript，所以我相信我会使用默认的 IE9 渲染。

问题是这样的:按钮文本左右两侧的填充似乎与文本的长度成正比。也就是说，文本越长，填充越宽。客户坚持要求某些按钮最多包含 20 个字符的文本，并且这些按钮在文本左右两侧的按钮内部有如此多的死 Angular (可以这么说，也就是 padding-left 和 padding-right)，以至于布局严重损坏。

由于按钮文本从 7 到 20 个字符不等，我也无法轻松地制作固定宽度的按钮。我想要完成的是固定 padding-left 和 padding-right。我能想到的最好的办法是以 em 为单位的行内宽度，例如，

<input value="The Big Whateverest" type="button" style="width:11em;">

我尝试使用内联样式进行填充/边距，但这只会让事情变得更糟。有什么建议吗？

编辑:根据解决方案，部分难题在于按钮位于表格单元格内。如果您来这里是因为需要了解这一点，请务必点击 Adam 解决方案中的链接以了解完整问题。

Answer 1

你可以适应this solution通过将 .button 更改为 input 来适应您的情况，如下所示:

<style>
input {
    padding: 0 .25em;
    width: auto;
    overflow:visible;
}
</style>

<!--[if IE]>
<style>
input {
    width: 0;
}
</style>
<![endif]-->