4

a:link around div - div 内のスタイリング

この HTML を考えると:

<a id="foo" href="foobar">
  <div id="bar">
    <h2 id="baz">Foo</h2>
  </div>
</a>

そして、この CSS (構造を表示するために追加された背景色):

a {
  display: block;
  padding: 20px;
  background-color: rgb(240,240,240);
}

#bar {
  width: 200px;
  height: 100px;
  background-color: rgb(220,220,220);
}

#baz {
  padding: 20px;
  text-decoration: none;
}

フィドル

Chrome では、一致した CSS ルールが含まtext-decoration: none;れていると表示されますが、テキストには実際に下線が引かれています。

Chrome コンソール
(ソース: pangram.net )

同様に、Firebug を使用すると、Firefox はnull計算されたtextDecorationスタイルを返します。

ファイアーバグ
(ソース: pangram.net )

MDN によると、それtext-decorationはすべての要素に適用されます。

text-decorationプロパティをリンクに適用するだけの簡単な回避策があることはaわかっていますが、これは私が期待した動作ではありません。この（明らかな）不一致を説明できる人はいますか？

編集:答えはここにあると思います:行の装飾: 下線、上線、および取り消し線

インライン フォーマット コンテキストを確立するブロック コンテナーで指定または伝達されると、装飾は、ブロック コンテナーのすべてのインフロー インライン レベルの子をラップする匿名のインライン ボックスに伝達されます。

しかし、私はまだ何が起こっているのか完全には理解していません。

4

3 に答える 3

4

おそらくご存じのとおり、Chrome と Firefox はデフォルトでハイパーリンクに下線を付けます。

ここで起こっていることは、(CSS ルールで指定されているように) ontext-decorationに計算される間、使用される値は、ブラウザーの既定のスタイルをその祖先である要素から継承した結果として生じるということです。この使用された値は、ページをキャンバスにレンダリングするときに計算された値を置き換えますが、DOM に関する限り、計算された値はカスケード解像度のみに基づいて残ります。none#bazunderlineanone

したがって、ここでの不一致は、計算された値と使用された値の違いにあります。定義はセクション 6.1にあります。

カスケードとは無関係にtext-decoration行われる、値を子孫ボックスに伝播するこの動作の概要を次に示します。

インライン要素で指定または伝播されると、その要素によって生成されたすべてのボックスに影響し、インラインを分割するフロー内のブロックレベルのボックスにさらに伝播されます (セクション 9.2.1.1を参照)。

于 2012-11-28T04:54:12.037 に答える
-1

下線を削除するtext-decoration: noneには、リンクにを配置する必要がありますa

フィドル

a要素がリンクまたはaタグ内にあるため、ブラウザーはリンクとして認識しましたが、要素自体にテキスト装飾がないため、下線はまだ残っていると思います..

于 2012-11-28T04:23:52.523 に答える
-1

「text-decoration」は「a」タグのプロパティです...「a」タグに追加するだけで機能します...ここでデモを参照してください

a {
  display: block;
  padding: 20px;
  background-color: rgb(240,240,240);
  text-decoration: none;
}
于 2012-11-28T04:25:17.480 に答える