<a> div内のハイパーリンクは大/ワイドになります

Question

divを 'a'タグで囲むことで奇妙な結果が得られ、内部で子のサイズではなく 'a'タグをできるだけ広くする必要があると感じます。 HTML5と関係があります。

Edgeは私が探している結果を多かれ少なかれ与えますが、何らかの理由でChromeで 'a'タグはページの全幅です。

また、 'a'タグ内にdiv 'margin'を含めることもできます。だから私は 'onclick'メソッドを使用することはできません。これはjavascriptなしで達成できますか？ JSFiddle。

<a href="http://example.com" style="background-color: #CCC;"> 
<div style="width: 100px; height: 100px; background-color: #C00; margin: 0px 8px 8px 0px; display:block;"><h2>text</h2></div> 
</a> 

<a href="http://example.com" style="background-color: #CCC;"> 
<div style="width: 100px; height: 100px; background-color: #C00; margin: 0px 8px 8px 0px;"><h2>text</h2></div> 
</a> 

<a href="http://example.com" style="background-color: #CCC;"> 
<div style="width: 100px; height: 100px; background-color: #C00; margin: 0px 8px 8px 0px; display:inline-block;"><h2>text</h2></div> 
</a> 

<a href="http://example.com" style="background-color: #CCC; display: block;"> 
<div style="width: 100px; height: 100px; background-color: #C00; margin: 0px 8px 8px 0px;"><h2>text</h2></div> 
</a> 

Answer 1

私はすぐに、別の「DIV」タグで、このような何か「」タグを囲むされ見つける最も簡単な回避策：

<div style="width: 100px"> 
    <a href="http://example.com" style="background-color: #CCC;"> 
     <div style="background-color: #C00; margin: 0px 8px 8px 0px;"><h2>text</h2></div> 
    </a> 
</div> 

をしかし、あなたは「欲しい具体的な理由があります"divの外側に配置するタグ？ div要素は正しいスペーシングを可能にするために使われ、 "a"タグは本質的にはハイパーリンクだけです。

<div style="background-color: #C00; margin: 0px 8px 8px 0px; width: 100px; height: 100px;"> 
    <a href="http://example.com" style="background-color: #CCC; display: inline-block; width: 100%; height: 100%;"> 
    <h2>text</h2> 
    </a> 
</div> 

PS：私は簡単な例として、ここでは、インラインCSSを使用していますが、これを使用するべきではありませんので、論理的に、あなたはこのような何かにつながるのdiv内の「」のタグを置きます。代わりにCSSクラスを使用してください。あなたは後で私に感謝します。