2011-07-22 8 views
0

私はJQDockを使い始めましたが、それは< IE8を除いて私にとって素晴らしい作品です。そこでは、イメージは全て、共に圧迫された状態で一緒に刻まれて表示されており、ロールオーバー効果は得られません。私はこれについての他の情報を見つけることができないので、私はそれが一般的な問題ではないように私はちょうど脂肪指で何かを仮定しています。IE8以下でJQdockの問題

は、ここでの問題上の任意の考えが参考になるコード

<script language="javascript" type="text/javascript" src="/Content/thirdparty/jquery/plugins/jqdock/jquery.jqDock.min.js"></script> 

<script language="javascript" type="application/javascript">//<![CDATA[ 
jQuery(document).ready(function ($) { 
    var opts = 
{ align: 'left', 
    bias: 45, 
    step: 75, 
    size: 55, flow: true 
}; 
    jQuery('#dock').jqDock(opts); 
}); 
//]]> 
</script> 


<style> 
#dock { background: #333 url("/Content/i/dock/pattern.png") repeat top left; width: 72px; border-right: 2px solid #d5d7d7; margin-left: -5px;padding: 0; } 
#dock a { font-size: 11px; color: #fbfbf1; border:0; text-decoration: none; } 
#dock div.jqDockWrap{ margin:0 auto; } 
#dock div.jqDock { cursor:pointer; } 
#dock img { padding: 8px 10px; } 
#dockWrapper { float:left; width:100px; padding:0; margin:15px 0 0 -5px; } 
.corners { margin-left: -11px;padding: 0;margin-bottom:-5px; } 
</style> 

<div id="dockWrapper" > 
<div class="corners"><img src="/Content/i/dock/top.png" width="80" height="15"/>   </div> 
<div id="dock"> 
    <a href="link1" title="Desk"><img src="/Content/i/dock/image1.png" alt="title" title="title" height="80" width="80" /></a> 
    <a href="link2" title="title"><img src="/Content/i/dock/image2.png" alt="title" title="title" /></a> 
    <a href="link3" title="title"><img src="/Content/i/dock/image3.png" alt="title" title="title" /></a> 
    <a href="link4" title="title"><img src="/Content/i/dock/image4.png" alt="title" title="title" /></a> 
<!-- others removed for brevity --> 
</div> 
<div class="corners"><img src="/Content/i/dock/bottom.png" width="80" height="15" /></div> 

です。

おかげ

答えて

0

は、私はあなたが<div id="dockWrapper" >を追加しようと閉じるのを忘れて考える</div>

<div id="dockWrapper" > 
<div class="corners"><img src="/Content/i/dock/top.png" width="80" height="15"/>   </div> 
<div id="dock"> 
    <a href="link1" title="Desk"><img src="/Content/i/dock/image1.png" alt="title" title="title" height="80" width="80" /></a> 
    <a href="link2" title="title"><img src="/Content/i/dock/image2.png" alt="title" title="title" /></a> 
    <a href="link3" title="title"><img src="/Content/i/dock/image3.png" alt="title" title="title" /></a> 
    <a href="link4" title="title"><img src="/Content/i/dock/image4.png" alt="title" title="title" /></a> 
<!-- others removed for brevity --> 
</div> 
<div class="corners"><img src="/Content/i/dock/bottom.png" width="80" height="15" /></div> 
</div> 

UPDATE

あなたはDOCTYPE宣言を持っている

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">