1

私はこれのためにIE8で奇妙な振る舞いをしました

HTML：

<a class='main'>
  <img src='http://annawrites.com/blog/wp-content/uploads/2011/04/color-explosion.jpg' />
  <div class='layer'>&nbsp;&nbsp;&nbsp;</div>
</a>

CSS：

.main { display: block; position: relative; width: 100px; height: 100px; }
.main img { width: 100px; height: 100px; /*display: none;*/ }
.layer { position: absolute; top: 0px; left: 0px; width: 100%; height: 50%; cursor: crosshair; }

JSFiddle：http ://jsfiddle.net/HLua8/2/ （またはIE8でこれを開きます）

IE8では、.layer（つまり、十字カーソル）は左上隅にのみあります（3 xのコンテンツに最小化されます&nbsp;）

.main img設定すると正常に動作することに気づきましたdisplay:noneが、画像が必要です

誰かが私が.layerIE8で表示されるはずの大きさになるように手助けしてくれませんか？（つまり、他のブラウザと同じように、幅100％、高さ50％）

4

1 に答える 1

2

何度もいじった後、私が思いついた最善の解決策は、空白/透明な画像を作成し、これをレイヤーの背景画像として使用することです。

あなたのCSSに追加します：

.layer {background-image:url(blank.png);}    
.layer:hover{cursor: crosshair;}

ドキュメントの更新バージョンは次のようになります。

css：

#container {
    margin:40px;
    position: relative;
    width: 100px;
    height: 100px;
}

.main img {
    max-width: 100%;
}
.layer {
    position: absolute;
    top: 0px;left: 0px;
    width: 100%;height: 50%;
    background-image:url(img/blank.png);
}

.layer:hover{cursor:crosshair;}

html：

<div id="container">
   <a class='main' href="test.html"><img src='http://annawrites.com/blog/wp-content/uploads/2011/04/color-explosion.jpg' /></a>
   <div class='layer'></div>
</div>
于 2013-03-20T03:26:08.537 に答える