ホームページ  >  記事  >  ウェブフロントエンド  >  テーブルの重複によって発生するセル境界線の幅の問題 borders_html/css_WEB-ITnose

テーブルの重複によって発生するセル境界線の幅の問題 borders_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:53:121605ブラウズ

他の人が書いた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 は同じ道をたどるはずです。

こんなに些細な事でも、一枚の写真で、すぐに理解できます。

---------------------------------------------- ----

退屈なときは、コードを使って自分を慰めてください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。