近日做个小站的时候从forum.ubuntu.org.cn得到启发,使用了其图片显示插件HighSlide(http://highslide.com/)。
这个插件的好处不说了,google上满版都是。
只是在使用的过程中,发现一个郁闷的问题,在FF中表现OK,但是在IE6里就抽筋了,点击图片不是弹出一个DIV层,而是跳到另外一个页面使用普通的显示图片的方式打开(此时地址栏里边是:http://localhost:xxx/xxx/xxx/ABC.jpg)。
调试了N久,发现是在我自己的css里有这样的代码:
body{ width: 1000px; margin: 0 auto;padding:0px; ...... }
?正是这个width导致了这个问题,这个宽度适当的调大 就可以解决这个问题。至于原因,等有空了再做研究。
或者,看到这篇小文的高手帮忙解答一下~
附html代码:
<html> <head> <script type="text/javascript" src="highslide/highslide-with-gallery.js"></script> <link rel="stylesheet" type="text/css" href="highslide/highslide.css" /> <title>test highslide</title> <script type="text/javascript"> hs.graphicsDir = 'highslide/graphics/'; hs.align = 'center'; hs.transitions = ['expand', 'crossfade']; hs.outlineType = "rounded-white"; hs.fadeInOut = true; //hs.dimmingOpacity = 0.75; </script> </head> <body> <div class="content"> <div> <!-- flash here --> <div class="indexleft"> <ul> <#list model.gList as g> <li>${g.title}</li> </#list> </ul> </div> <div class="indexright"> <div class="block"> <div class="images"> <a href="upload/images/big.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="upload/images/small.jpg" alt="Highslide JS" title="Click to enlarge" width="240px" height="180px"/> </a> <div class="highslide-caption"> <div class="producttitle">CXW-218-TV</div> <p> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </p> 价格: RMB 9,999.00<br/> 产地: 中国 江苏<br/> 颜色: 银白色<br/> </div> </div> <div class="texts"> <div class="title"><a href="#">CXW-218-TV</a></div> <p> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </p> 价格: RMB 9,999.00<br/> 产地: 中国 江苏<br/> 颜色: 银白色<br/> </div> </div> </div> </div> </body> </html>