IE8 及更低版本中的 JQdock 问题

Question

I started using JQDock and it works great for me except in < IE8.我开始使用 JQDock，它对我来说非常有用，除了在 < IE8 中。 There the images are all shown in their expended state all crunched together and I don't get the roll over effect.那里的图像都显示在他们用完的 state 中，它们都一起嘎吱作响，我没有得到翻转效果。 I can't find any other info on this so I am assuming I just fat fingered something as it doesn't seem to be a common problem.我找不到任何其他信息，所以我假设我只是用手指发胖，因为这似乎不是一个常见的问题。

Here's the code这是代码

<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>

Any thoughts on the issue would be helpful.关于这个问题的任何想法都会有所帮助。

Thanks谢谢

Answer 1

i think you forgot to close the <div id="dockWrapper" > try add </div>我想你忘了关闭<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更新

have you declared the doctype你有没有声明过文档类型

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

IE8 及更低版本中的 JQdock 问题

问题描述

1 个解决方案

解决方案1
0 2011-07-22 05:49:24

IE8 及更低版本中的 JQdock 问题

问题描述

1 个解决方案

解决方案1 0 2011-07-22 05:49:24

解决方案1
0 2011-07-22 05:49:24