近日做个小站的时候从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" οnclick="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>