1

そう。自分の能力をテストするために小さなサイトを作成しています。私のサイトには、Firefox で次のようなページがあります。

ここに画像の説明を入力

追加のファイルと追加のアクション ボタンはテーブル内にあります。各ボタンは 内にあり、要素<td>で CSS を使用して上下に表示されるように設定されています。display:block;<td>

問題は、IE9 以下でページを開くと、td が次のようにインラインで表示されることです。

ここに画像の説明を入力

このため、ページの応答性が損なわれ、ビューポートのサイズを変更するとページ コンテンツが左メニューの下に移動します...

テーブルの HTML は次のとおりです。

<table class="buttons">
    <tbody>
       <tr>
          <th colspan="2">Additional files:</th>
       </tr>
       <tr>
          <td>
             <a id="cv" href="">Curriculum Vitae</a>
          </td>
          <td>
             <a id="cover" href="">Cover Letter</a>
          </td>
       </tr>
    </tbody>
</table>
<table class="buttons">        
    <tbody>
       <tr>
          <th colspan="3">Additional actions:</th>
       </tr>
       <tr>
          <td>
             <a class="approve" href="">Denie</a>
             <span style="display: none;">31</span>
          </td>
          <td>
             <a href="" class="mailto">Reply</a>
          </td>
          <td>
             <a href="" class="link-fain delete-app">Delete</a>
          </td>
       </tr>
    </tbody>
</table>

そして、これはCSSです:

.buttons {
    float: left;
    margin: 20px auto 0;
    width: 50%;
}
.buttons td {
    display: block;
    width: 100%;
}

誰かが私に解決策を提案できますか? 前もって感謝します!

4

2 に答える 2