ホームページ > 記事 > ウェブフロントエンド > テーブルの重複によって発生するセル境界線の幅の問題 borders_html/css_WEB-ITnose
他の人が書いたCSSを偶然見ましたが、コメントで、テーブル要素の境界線が折りたたまれている(折りたたまれている、重なっている、どの言葉が適切ですか?)場合、ブラウザごとにセルの境界線が異なる方法で計算され、その後、また、頑固な技術者のためにコメントにリンク アドレス「FF と Webkit の境界崩壊の違い」を書きました。これを詳しく調べないと眠れません。
私は怒ってウェブサイトを開きました(私は毎回非常に怒っていました、そして、さまざまな理由で非常にゆっくりと開くことがよくありました)、そして私は自分の考えを明確にしました:それらは処理方法は異なりますが、インターフェース。最後に提示されるものは同じです。で、ゆっくり考えてみたら、どうやらFirefoxではcollapseを「折りたたむ」の意味で扱い、webkitではcollapseを「重なる(折りたたむ)」の意味で扱っているようです。
この場合、英語のタイトルを翻訳するのは非常に困難です。境界の重なりを処理する場合の FF と Webkit の違いはどのように翻訳すればよいですか? Webkit はオーバーラップの観点から表示され、「崩壊」と翻訳される場合は、Firefox は崩壊の観点から表示されます。ソフトウェア特許では突然、アイデアは保護されず、表現だけが保護されるという現象が起きています。
ページの CSS レイアウトは次のとおりです:
table { table-layout: fixed; width: 960px; border-collapse: collapse; border-spacing: 0;}td { padding: 2px; height: 22px; border: 1px solid gray;}
次に、簡単な HTML テスト コードを添付します:
<table> <tbody> <tr> <td>I'm td1</td> <td id="td2"> I'm td2 </td> </tr> </tbody></table>
最後に、getComputedStyle(td2).borderLeftWidth を使用して計算された結果は、実際には 1px 異なります。 Webkit の場合は 1px、Firefox の場合は 1px です。以下は 0px で、IE は td2.curretStyle.borderLeftWidth のみを使用でき、結果は Webkit と一致します。この観点から見ると、Webkit と IE は同じ道をたどるはずです。
こんなに些細な事でも、一枚の写真で、すぐに理解できます。
---------------------------------------------- ----
退屈なときは、コードを使って自分を慰めてください。