ページの上部でバナー ローテーターの JQuery スクリプトを実行して、画像をフェード インおよびフェード アウトさせています。IE 以外のすべてのブラウザで完全に動作します。境界線は正しい位置にありますが、画像は右にずれています。いろいろ試してみたところ、それは私の絶対的なポジショニングが原因であることがわかりました。
#bannerRotator { width:969px; height:226px; margin:20px auto; background:white; border- style: solid; border-width:5px; border-color:white; border-radius: 10px;}
#bannerRotator ul li img{ max-width:969px; max-height:226px; }
#bannerRotator { position:relative; }
#bannerRotator ul { list-style:none; padding:0; position:relative; margin:0; }
#bannerRotator ul li { display:none; position:absolute; left:0px;}
#bannerRotator ul li a { text-decoration:none; }
#bannerNav { position:absolute; right:15px; bottom:15px; background:url(./img/transBlack75.png) repeat 0 0; padding:5px 5px 5px 10px; }
#bannerNav a { margin:3px 10px 0 0; height:10px; width:10px; display:block; background:url(./img/dotDark.png) no-repeat 0 0; float:left; }
#bannerNav a.active { background-image:url(./img/dotLight.png); }
#bannerNav span.pause, #bannerNav span.play { cursor:pointer; height:15px; width:15px; display:block; background:url(img/pause.png) no-repeat 0 0; float:left; }
#bannerNav span.play { background-image:url(./img/play.png) }
HTMLは次のとおりです
<div id="bannerRotator">
<ul>
<li>
<img src="./images/bannerImage1.jpg" alt="bannerImage1">
</a>
</li>
<li>
<img src="./images/Newbury.jpg" alt="bannerImage2">
</a
></li>
<li>
<img src="./images/bannerImage3.jpg" alt="bannerImage3">
</a
></li>
<li>
<img src="./images/bannerImage4.jpg" alt="bannerImage4">
</a
></li>
<li>
<img src="./images/bannerImage5.jpg" alt="bannerImage5">
</a
></li>
</ul>
</div>