CSS 浏览器兼容有关问题！

2013-07-04

CSS 浏览器兼容问题！！！！script typetext/javascript$(document).ready(function() {$(#divSideshow

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 加上一个背景颜色就能正常工作，不过这样就把图片给遮到了...
[解决办法]
加display:block;试试
[解决办法]
<div class="index-left">
 
<div class="index-left-hover"> </div>
</div>

<div class="index-right" >
 
<div class="index-right-hover"> </div>
</div>

加入这个空格符 看看。

热点排行

asp.net

CSS 浏览器兼容有关问题！