3

IE7に問題があるので、ここに説明があります。

HTML

<a class="item" href="http://google.com">
   <div class="itemImg">
       <img src="http://img-fotki.yandex.ru/get/4512/vmazann.0/0_52db2_1c3135a9_orig.jpg" alt=""/>
   </div>
   <h3>Hello World</h3>
</a>

CSS

.item {
   color: #140804;
   cursor: pointer;
   padding: 17px;
   position: relative;
   text-align: center;
   text-decoration: none;
   width: 142px;
   display:block;}
.item * {
   cursor: pointer;}
.itemImg {
   background: none repeat scroll 0 0 red;
   height: 150px;
   line-height: 150px;
   margin-bottom: 10px;
   overflow: hidden;
   text-align: center;
   vertical-align: middle;}
.itemImg img {
   vertical-align: middle;}

結果

http://jsfiddle.net/qjSpS/11/

問題

IE7 では画像はクリックできません

問題に対する私の考え

問題は、.itemImg の hasLayout プロパティの設定に何らかの関係があるようです。hasLayout (height: 150px; and overflow: hidden;) をトリガーするプロパティを削除すると、画像はクリック可能になります

質問

この問題を解決する方法はありますか? 高さ: 150px; およびオーバーフロー: 非表示; は必須プロパティです。

4

4 に答える 4

3

<a>IEでは、ブロックレベルの要素<div>またはの周りにインライン要素をラップできない可能性があります<h3>。

ほとんどのブラウザはそれを無視し、期待どおりに動作しますが、IEはこの問題についてかなり厳格です。

于 2011-03-04T13:14:49.580 に答える
3

これは私がこの問題を解決した方法です..代わりに：

<a><div><img></div></a>

これは私がしました：

<a href=""><div><div style=background:url(img.jpg);width:10px;height:10px;></div></div></a>

魅力のように働いた。

于 2011-09-20T16:26:45.963 に答える
1 
if ($.browser.msie  && parseInt($.browser.version, 10) === 7) {
    $('.itemImg').click(function () {
        $(window.location).attr('href', $(this).parent('a').attr('href'));
    });
}
于 2012-05-22T15:43:21.460 に答える
1

画像では、エッジの周りの赤い枠がクリック可能になっていることに気付きましたか?

divが問題の原因だと思います。

divを廃止できますか？

divなしでどのように機能するかを示すために、例を微調整しました: http://jsfiddle.net/qjSpS/10/

EDIT には別の方法がありました：http://jsfiddle.net/qjSpS/14/

完全に満足というわけではありませんが、すべての要素がクリック可能になりました.

于 2011-03-04T13:30:22.583 に答える