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

Question

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

问题是在兼容模式下的 IE8 或 9 中，按钮似乎移出其容器的右侧。不幸的是，我无法提供任何代码或指向 jsfiddle 的链接，因为它在 IE8 兼容模式下不起作用，但这里有一些问题的图片。

No min-width
Buttons 正常显示，但显然没有显示我们想要的最小宽度。

使用 min-width
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>

CSS

button,
.button,
input[type="submit"],
input[type="reset"] {
  background: #4586b6;
  color: #FFF;
  border: 0;
  padding: 3px;
  font-size: 13px;
  display: inline-block;
  height: 22px;
  cursor: pointer;
  margin: 0 3px 0 0;
  width: auto; }

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; }

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

Answer 1

所以，我发现了问题。

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

IE7 需要 awidth和 amin-width并且width:auto会触发该问题。

那么现在，如何解决呢？

使用条件 CSS

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

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

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

编辑：试试这个 CSS ：

（我能做到的最好）

<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]-->