web-dev-qa-db-ja.com

<a>タグ内の画像とテキスト

これは、生成されたhtml asp.netです（クライアントを特定する詳細をいくつか削除）

Windowsの場合XP/IE 7画像をクリックしても何も起こりません。テキストをクリックしてもハイパーリンクが実行されます。任意の場所を右クリックしてopen in new windowまたはopenも機能します。

他のブラウザでは、すべて正常に機能します。

IE7で正しく動作させるために私がこれを行うことができることを誰でも簡単に見ることができますか？

<div id="hdrXXX">                      
            <a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
                 <div style="float:left;display: block;"> 
                    <img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
                </div>
                <div style="float:left; display: block; padding:15px 0 0 0;"> 
                    <span id="XXX">Some text right here</span>

                </div>
            </a>  
       </div>
htmlcssinternet-explorerinternet-explorer-7
16
Adam Rackis

HTML5を使用してアンカー要素内にブロックレベルの要素のみを配置できますが、ブラウザのサポートはまだ少々あいまいです。 IE7は明らかにこれをサポートしていません。

これを行うために除算を使用する必要はありません。

<div id="hdrXXX">                      
    <a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
        <img id="ctl00_XXX" src="Images/XXX.png" style="border: 0; float: left; margin-right: 15px" /> 
        <span id="XXX">Some text right here</span>
    </a>  
</div>

これは同じ効果を発揮するはずです...

26
animuson

あなたのフロートのために、アンカーは崩壊します。また、インライン要素<div/>内にブロックレベルの要素<a/>を配置することはできません。

そこにあるW3C以外のコードを維持するために、閉じる</a>の直前にこのコードでフロートをクリアする必要があります。

<div style="clear: both"></div>

おそらく.clearというクラスを作成し、スタイルをそこに移動する必要があります。これが私のサイトの例です：

.clear-fix {
clear: both !important;
display: block !important;
font-size: 0 !important;
line-height: 0 !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}

W3C準拠のコードを実行するより良い方法は次のとおりです。

<div id="hdrXXX">                      
    <a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
        <span style="float:left;display: block;"> 
            <img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
        </span>
        <span style="float:left; display: block; padding:15px 0 0 0;"> 
            <span id="XXX">Some text right here</span>
        </span>
        <span class="clear-fix"></span>
    </a>  
</div>
2
user888750

Imgタグとspanは自然にインライン表示されるため、divを削除してみてください。 divを追加することになっているタグ自体に右マージンが必要な場合は、表示ブロックを追加し、左にフロートします。また、アンカータグにoverflow：hiddenを追加して（floatを使用する場合）、2つの子要素の合計スペースを占有します。

1
agmcleod