そう。自分の能力をテストするために小さなサイトを作成しています。私のサイトには、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%;
}
誰かが私に解決策を提案できますか? 前もって感謝します!