0

Mosaicのようなスライドキャプションを作成しようとしていますが、より軽量です。すべての主要なブラウザーではすべて問題ないように見えますが (ie8 では遅く見える場合でも)、ie7 では何も起こりません。私はieTesterでテストしていますが、バグがソフトウェアによるものなのか、自分のコードによるものなのかわかりません。改善のヒントが得られると思います！

とにかくありがとう。

HTML:

<div class="imgbox">
 <img src="#" />
 <a href="#" class="caption">
 <div class="details">
 <h6>Lorem ipsum</h6>
 <p>Lorem ipsum dolor sit amet,…&lt;/p>
 </div>
 </a>
</div>

CSS:

.imgbox{
 width: 204px;
 height: 154px;
 position: relative;
 overflow: hidden;
 float: left;
 margin: 10px;
 border:1px solid #999;
 -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.8);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);}

.imgbox img{
 width: 200px;
 height: 150px;
 padding: 2px;
 overflow: hidden;}


.caption{
 display:block;
 position:absolute;
 top:104px;
 height:100%;
 width:100%;

 background: rgb(0,0,0);
 background: rgba(0,0,0,0.6);  
 background: transparent\9;
 zoom: 1;
 -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);}

JS:

$(".imgbox").hover(
    function() 
    {$(this).children('.caption').animate({top:0},"fast");},
    function() 
    {$(this).children('.caption').animate({top:104},"fast");}
 );
4

2 に答える 2

0

HTML コードが無効です。要素はインライン要素であり、のaようなブロック要素を含めることはできませんdiv。ブラウザーには、不適切なマークアップを処理するさまざまな方法があり、特定のタグを再配置または無視して、有効な要素を作成する場合があります。

正しく解析されるようにリンク内にインライン要素を配置してから、CSS を使用してそれらをブロック要素に変換できます。

<div class="imgbox">
 <img src="#" />
 <a href="#" class="caption">
 <spap class="details">
 <span class="h6">Lorem ipsum</span>
 <span class="p">Lorem ipsum dolor sit amet,…&lt;/span>
 </span>
 </a>
</div>

CSS:

.imgbox a, .imgbox .details, .imgbox .h6, .imgbox .p { display: block; }

また、CSS コードにはいくつかのハックがあり、すべてが IE7 でうまく機能しない可能性があります。それらのいくつかをコメントアウトして、問題が発生するかどうかをテストできます。

于 2011-08-23T06:10:50.257 に答える
0

キャプションの位置から来ていることがわかりました。上の位置を設定しましたが、左または右の位置を定義しませんでした。そのコードを使用すると、ie7 に表示されます。

.caption{
 display:block;
 position:absolute;
 top:104px;
 left:0;
 height:100%;
 width:100%;

しかし、ie8 と ie7 ではまだ非常に遅いです。とにかく問題解決！

于 2011-09-01T22:54:42.480 に答える