html - Chrome と IE でハイパーリンクを正しくブロックする方法

Question

私は常に次のコードを使用して、 < a > リンクがコンテナーのコンテンツを埋めるようにしました。chrome と IE の両方で、< a > リンクのコンテンツのサイズが表示されるようになりました。

明示的なピクセルの高さと重要なタグを試しましたが、クロムはまだリンクをコンテンツのサイズにすることを主張しています. リンクにはコンテンツがないため、高さと幅が 0px として表示されます。

これは私がハイパーリンクをブロックする方法ですか？

HTML

<div class="mydiv">
    <a href="#"></a>
</div>

CSS

.mydiv {
    height: 50px;
    width: 50px;
    display: block;
}
.mydiv a {
    height: 100%;
    width: 100%;
    display: block;
}

score 1 · Accepted Answer

もしかして:これ

HTML:

<div class="abc">
  <a href="#"></a>
</div>

CSS:

.abc {
height: 50px;
width: 50px;
display: block;
border-style:solid;
border-width:3px;
}
.div a {
height: 100%;
width: 100%;
display: block;
}

div とリンクのクラスを定義し、好きなようにスタイルを設定するだけです。

score 1 · Accepted Answer

どうぞ - Chrome と IE でテストされ、両方で動作します:

HTMLは次のとおりです。

<div class="abc">
    <a href="http://www.google.com"></a>
</div>

そしてCSS：

div.abc { display:block ;
    width:200px ;
    height:50px ;
    background:blue ;
}

.abc a { display:block ;
    width:100% ;
    height:100% ;
}

div.abc で高さと幅を編集すると、それに応じてハイパーテキストリンクが調整されます。

score 0 · Accepted Answer

.divからを削除する必要があります。クラス名のセレクターです。ここでは、直接のスタイルを記述しています。div

div {
height: 50px;
width: 50px;
display: block; background:red
}
div a {
height: 100%;
width: 100%;
display: block;
}

score 0 · Accepted Answer

Chrome と IE のバージョンとオペレーティングシステムから始めるべきだと思いますが、提供したコードは魅力的です。

古いバージョンの IE ではアンカーをブロックとして表示する際に問題があり、それを修正する適切な方法は : のような偽の背景を設定することでしたがbackground: url(/);、そうではないことは確かです。

また、ページに追加のスタイルシートを適用している場合は、情報を提供してください。

4 に答える 4