internet-explorer - IE 互換モードでの最小幅

Question

目標: ボタンに最小幅を持たせますが、他の言語の場合のように、テキストが最小幅よりも長い場合は拡張します。

問題は、互換モードの IE8 または 9 では、ボタンがコンテナーの外側で右に移動しているように見えることです。残念ながら、jsfiddle は IE8 互換モードでは機能しないため、コードやリンクを提供することはできませんが、問題の写真をいくつか示します。

通常、最小幅
のボタンは表示されませんが、必要な最小幅が明らかに表示されません。

最小幅
の IE レイアウトでは、本来あるべき 100 ピクセルの幅が表示されますが、ボタンがコンテナーの外に移動しているように見えます (画像の右下を参照)。また、他のボタンのテキストが中央になくなっていることに注意してください。これは関連していると思われます。

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 標準にすると、私が抱えている問題が再現されます。