62,046
社区成员
发帖
与我相关
我的任务
分享CSS 浏览器兼容问题！！！！
<script type="text/javascript">
$(document).ready(function() {
$('#divSideshow').cycle({
fx: 'fade',
delay: 2000
});
$('#divSideshow').cycle("pause"); //停止轮播
//下一页、渐入渐出
$(".index-right").click(function() {
$('#divSideshow').cycle("next");
}).hover(function() {
$(".index-right-hover").fadeIn(500);
}, function() {
$(".index-right-hover").fadeOut(500);
});
//上一页、渐入渐出效果
$(".index-left").click(function() {
$('#divSideshow').cycle("prev");
}).hover(function() {
$(".index-left-hover").fadeIn(500);
}, function() {
$(".index-left-hover").fadeOut(500);
});
});
</script>
<style type="text/css">
.index-left,.index-right{ position:absolute; z-index:101; width:480px; height:400px; cursor:pointer; }
.index-left{ float:left; }
.index-right{ margin-left:491px;}
.index-left-hover,.index-right-hover{ width:102px; height:95px; margin-top:150px; display:none;}
.index-left-hover{ background: url("../App_Themes/img/web/left.png") no-repeat ;}
.index-right-hover{ float:right; background: url("../App_Themes/img/web/right.png") no-repeat ;}
</style></head>
<body nav="menu-item-135" class="body-bg">
<div id="divCtnr" runat="server">
<div class="index-left">
<div class="index-left-hover"></div>
</div>
<div class="index-right" >
<div class="index-right-hover"></div>
</div>
<div id="divSideshow" runat="server">
</div>
</div>
</body>
</html>问题在CSS部分。
这是一个左右图片轮播效果，class="index-left" 是向左，class="index-right"是向右，这是两大层把轮播分成两部分，里面是小箭头，在chrome,firefox都没问题。
在IE里面鼠标移到 class="index-left"，class="index-right"没任何反应。
这是因为class="index-left" ，class="index-right"是为空白层，原先设置的宽高就不起作用了。
给index-left、index-right 加上一个背景颜色就能正常工作，不过这样就把图片给遮到了...
...全文
请发表友善的回复…
发表回复
吴青峰 2013-06-20
- 打赏
- 举报
<div class="index-left">
<div class="index-left-hover"> </div>
</div>
<div class="index-right" >
<div class="index-right-hover"> </div>
</div>
加入这个空格符 看看。
Null_Reference 2013-06-20
- 打赏
- 举报
加display:block;试试
lixia2229 2013-06-20
- 打赏
- 举报
随便回复送分了啊
lixia2229 2013-06-19
- 打赏
- 举报
我的解决方法是做一张100%的透明图为背景，这样可以。
哎，有没有更好的方法....
lixia2229 2013-06-19
- 打赏
- 举报
求高手解答！！
