1

テーブルとセルの境界線の両方が表示されているはずの非常に単純なテーブルがあります。これは Chrome と IE では正常に機能しますが、Firefox ではテーブルの境界線のみが表示され、セルの境界線は表示されません。HTMLは次のとおりです。

<table border = "1" class ="MyTable">
   <tr>
       <td class = "c1"></td>
       <td class = "c2"></td>
       <td class = "c3"></td>
       <td class = "c4"></td>
       <td class = "c5"></td>
       <td class = "c6"></td>
       <td class = "c7"></td>    
       <td class = "c8"></td>
       <td class = "c9"></td>
       <td class = "c10"></td>
</tr>   
</table>

(すべての td クラスは、後で javascript で参照するためにそこにありますが、この問題には関係ありません。または、少なくとも私はそうは思いません)

CSS は次のとおりです。

table.MyTable {
    margin-left: 10%;
}

table.MyTable td
{   
   width: 20px;
   height:30px;
   border: 4px solid black;
}

私は1）テーブルクラスの代わりにテーブルIDを使用してみました。2) <table border ="1" >HTML から削除し、代わりに CSS にスタイリング情報を追加します。3) CSS コードを個別の border-style、border-color、および border-width コマンドに分割します。いずれの場合も、コードは Chrome と IE では正常に表示されますが、Firefox では表示されません。

参考までに、これは次のようになります (Chrome の場合):

Chrome での正しいレンダリング

Firefox では次のように表示されます。

Firefox での不適切なレンダリング

4

1 に答える 1

2

私は答えを見つけました。他の誰かが同じ問題を抱えている場合に備えて、ここに追加します。ドキュメントの先頭にタグ<!DOCTYPE html>を追加すると、問題が解決します。

違いを確認してください：

http://www.users.on.net/~tschembri214/test1.html - 正しく表示されます

http://www.users.on.net/~tschembri214/test.html - 正しく表示されない

3 台の異なるコンピュータの Firefox で 2 番目のリンクが正しく表示されないことを確認しました。doctype タグが含まれていることを除けば、両方のページですべてが同じです。また、これは jsfiddle では再現しません - Firefox ではタグなしで動作します。

于 2013-04-23T21:46:52.793 に答える