1

テーブルのtdセルに配置された別のdiv内にネストされた一連のdiv要素があります。何らかの理由で、これらのdivは左側にフロートされ、インラインブロックになっていますが、テーブル、td、コンテナdivの両方が幅100％に設定されていますが、IE9では垂直に積み重ねられているように見えます。

これはライブサイトへのリンクです（見本を確認してください）：http ：//ssd2go.co.uk

そして、これは私のコードの単純化されたサンプルです：

<table>
    <tr>
        <td>
           <div class="select">
               <div><input><a><img></a></div>
               <div><input><a><img></a></div>
               <div><input><a><img></a></div>
           </div>
        </td>
    </tr>
    <tr>
        <td>
           <div class="select">
               <div><input><a><img></a></div>
               <div><input><a><img></a></div>
               <div><input><a><img></a></div>
           </div>
        </td>
    </tr>
</table>

table、tr、td、およびdiv.selectは幅：100％です。すべての内部レイヤーとリンクにはfloat：leftとdisplay：inlineがあります

4

2 に答える 2

1

修正：次のプロパティを削除すると、IE 8-10、FF、Chromeで修正されます。

.variations-table,
.variations-table tr,
.variations-table tr td,
.variations-table tr td>div {
    width: 100% !important;
}

ベストプラクティス：理想的には、このような単純なレイアウトでは、マークアップをそれほど複雑にしないようにする必要があります。開始できる場所：テーブルの使用を避け、クラス名を短くし、IDの使用を最小化または排除するようにしてください。あなたは次のようなもので逃げることができます：

<form>
  <div class="select">
    <a class="select-option">120 GB</a>
    <a class="select-option active">240 GB</a>
    <a class="select-option">480 GB</a>
  </div>
  <div class="select">
    <a class="select-option black">Black</a>
    <a class="select-option gray">Gray</a>
    <a class="select-option purple active">Purple</a>
    ...
  </div>
</form>
于 2013-02-15T14:21:22.273 に答える
1

次の幅を外します：100％から：

.variations-table、.variations-table tr、.variations-table tr td、> .variations-table tr td> div

少し奇妙なセレクターを使用することもできます。重要なものを使用する必要はありません（ほとんどの場合）。

于 2013-02-15T14:26:08.253 に答える