Internet explorer IE兼容模式下的最小宽度

目标：使按钮具有最小宽度，但在文本长度大于最小宽度时会展开，就像在其他语言中一样

问题是，在兼容模式下的IE8或IE9中，按钮似乎从容器外部向右移动。不幸的是，我无法提供任何代码或链接到JSFIDLE，因为它不能在IE8兼容模式下工作，但下面是一些问题的图片

无最小宽度
按钮显示正常，但显然没有显示我们想要的最小宽度。

最小宽度
IE布局显示了100px的宽度，这是它应该的宽度，但按钮似乎移动到了容器的外部（参见图的右下角）。另外请注意，另一个按钮的文本不再位于中心，我认为这是相关的。

HTML

<table width="97%" border="1" class="whiteTable" style="margin: 10px;">
    <tr>
        <td colspan="2">
            <div style="position: static; float: left; z-index: 1; width: 100%">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td>
                            <div id="pnlInfo">
                                <input name="ucAttrEdit$cmdInfo" class="button small" id="ucAttrEdit_cmdInfo" type="submit" value="Info" />
                            </div>
                        </td>
                        <td align="right" colspan="2">
                            <table cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td class="Pad5">
                                        <div id="pnlOk">
                                            <input name="ucAttrEdit$cmdOk" class="button small" id="ucAttrEdit_cmdOk" type="submit" value="OK" />
                                        </div>
                                    </td>

                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>

注意：使用上述代码并将IE9置于浏览器模式：IE9兼容模式和文档模式：IE7标准复制了我遇到的问题。

因此，我发现

他们的规范说它适用于“浮动块级元素”，但他们没有提到它还需要一个显式的宽度--“自动”不起作用。虽然这对于“有弹性”的布局很好，但对于我想要的：一个灵活的、无表格的表单布局（包含可以扩展到其内容大小的元素）来说是没有用的

IE7需要一个

width

和

minwidth

，而

width:auto

将触发该问题

那么现在，如何解决呢

使用条件CSS

<style>
  input {width:auto} /*for ie6-7*/
</style>
<!--[if lt IE 7]>
<style>
  input {width:100px} /*for ie6-7*/
</style>
<![endif]-->

为ie6-7输入{width:auto}/**/

（注意：这些css不够具体，会被样式表覆盖。您必须更改它们）

…或者您可以使用上面链接中的脚本

编辑：尝试以下CSS： （尽我所能）

按钮
输入[type=“submit”]，
输入[类型=“重置”]{
背景#4586b6；
边界：0；
填充：3倍；
字体大小：13px；
高度：22px；
光标：指针；
利润率：0.3px 0；
}
/*
按钮，小，
.按钮，小，
输入[type=“submit”]。小，
输入[type=“reset”]。小{
最小宽度：100px；}*/
.Pad5{padding:5px}
白表{
背景：#F6F6F6；
边框：1px实心#CCC；}
.按钮，输入[type=“submit”]，输入[type=“reset”]{宽度：自动；颜色：fff；显示：内联块；最小宽度：100px；}

如果没有代码，我不知道如何帮助您。请提供html和css。我们可以尝试在新文件中进行复制，而不是在JSFIDLE中进行复制<代码>显示：内联块和

最小宽度

在IE8中是新的。我对您在兼容模式下出现问题并不感到惊讶。我添加了一些代码。这是一个旧的webforms项目，所以有很多表格和垃圾。我对compat模式的问题也不感到惊讶，但我们的应用程序必须在它中工作，因为所有的东西最初都是在IE6中工作的，但我正在将一些东西转换为在Chrome中工作。您没有提供足够的代码。集装箱外问题可能与

Pad5

或

pnlOk

有关。。。请提供至少整行的代码（是的，信息按钮也是）。解决方案可能会涉及到条件CSS，因为例如，

width

在怪癖模式下充当

minwidth

。我添加了整行，很难去除所有这些内容。我知道min width充当宽度，但这并不能解释为什么它会将自身重新定位到容器外。这确实再次正确定位了按钮，但是如果文本对于按钮来说太大，它将不允许按钮再扩展。Mh，黑客适用于ie的每一个版本。所以。。。使用条件注释（我编辑了我的答案）。

<style>
  input {width:auto} /*for ie6-7*/
</style>
<!--[if lt IE 7]>
<style>
  input {width:100px} /*for ie6-7*/
</style>
<![endif]-->

<style>
.button,
input[type="submit"],
input[type="reset"] {
  background: #4586b6;
  border: 0;
  padding: 3px;
  font-size: 13px;
  height: 22px;
  cursor: pointer;
  margin: 0 3px 0 0;
  }

/*
button.small,
  .button.small,
  input[type="submit"].small,
  input[type="reset"].small {
    min-width: 100px; }*/

.Pad5{padding:5px}

table.whiteTable {
  background: #F6F6F6;
  border: 1px solid #CCC; }


  .button,input[type="submit"],input[type="reset"] {width:auto; color:#fff; display: inline-block;min-width: 100px;} 
</style>
<!--[if IE 6]>
<style>
  .button,input[type="submit"],input[type="reset"] {width:100px; color:#ff00ff;display: block} 
</style>
<![endif]-->
<!--[if IE 7]>
<style>
  .button,input[type="submit"],input[type="reset"] {width:auto; color:#ffff00;display: block; min-width:auto;} 
</style>
<![endif]-->