IE9 quirks mode input type=button width padding 和文字长度成正比，怎么挤？答案

【问题标题】：IE9 quirks mode input type=button width padding is proportional to length of text, how to squeeze?IE9 quirks mode input type=button width padding 和文字长度成正比，怎么挤？
【发布时间】：2012-12-26 16:20:48
【问题描述】：

我有一个按钮渲染问题。我处于 IE9 怪癖模式。它是 html 框架（不是 iframe）中的遗留代码，目前我对 quirks 模式别无选择。我已经去掉了所有的 css 和 javascript，所以我相信我只能使用默认的 IE9 渲染。

问题是这样的：按钮文本左右的填充似乎与文本的长度成正比。也就是说，文本越长，填充越宽。客户坚持要求某些按钮最多包含 20 个字符的文本，并且这些按钮在按钮内文本左右两侧的大量死区中构建（即，可以说是 padding-left 和 padding-right），以至于布局严重损坏。

由于按钮文本从 7 到 20 个字符不等，我也不能轻易地做固定宽度的按钮。我想要完成的是固定的 padding-left 和 padding-right。我能想到的最好的方法是 ems 中的内联宽度，例如，

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

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

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

【问题讨论】：

标签： css internet-explorer-9 quirks-mode

【解决方案1】：

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

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

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

【讨论】：

谢谢！我对问题进行了编辑，以指出难题的一部分是按钮位于表格单元格内。感谢您提供该见解的链接。