Question

我正在使用自己的jquery slider.it在Chrome和FireFox中正常工作，但在IE中没有。我的脚本也是如此。有人有解决方案吗？

这是我的CSS：

<style>
  #rol{
      display: block;
        width:950px;
        height:154px;
        margin:0 auto;
        overflow:hidden;
    }

    #rol .prev-r,.next-r{
        position:absolute;
        margin-top:60px;
        width:11px;
        height:37px;
        cursor:pointer;
    }

    #pos{
        width:1500px;
        float:left;
    }

    .next-r{
        background:url(/themes/classic/images/slider/rol-next.png) no-repeat;
    }
    .prev-r{
        background:url(/themes/classic/images/slider/rol-prev.png) no-repeat;
    }
    .next-r:hover{
        background:url(/themes/classic/images/slider/rol-next.png) no-repeat 0 -50px;
    }
    .prev-r:hover{
        background:url(/themes/classic/images/slider/rol-prev.png) no-repeat 0 -50px;
    }
    .partner-box {
        color: white;
        width: 218px;
        height: 154px;
        border: ridge 1px #666;
        background-color: #16455D;
        float: left;
        margin: 0 10px 0 8px;
    }
</style>

这是我的HTML：

<div id="rol">
    <p style="float:left;margin-left:-20px;display:block;" class="prev-r"></p><p style="float:left;margin-left:960px;display:none;" class="next-r"></p>
    <div id="pos">
        <div class="partner-box">
            <img src="partner/5prime.jpg" width="218" height="65" />
            <p>
                Nucleic Acid Purification, PCR and RT PCR, Molecular Biology Reagents, Lab Essentials and Accessories ...
            </p>
            <a class="read-more" href="/partners/view/5prime">Read More</a>
        </div>
        <div class="partner-box">
            <img src="partner/metabion_header.jpg" width="218" height="65" />
            <p>
                Oligonucleotides & Peptides :<br/> DNA, RNA, ZNA, Dual labeled probes, Light Cycler probes, Peptides, Antibodies
            </p>
            <a class="read-more" href="/partners/view/metabion">Read More</a>
        </div>
        <div class="partner-box">
            <img src="partner/54564.jpg" width="218" height="65" />
            <p>
                We supply wide range of Real Time PCR, PCR and FEP kits for molecular diagnostics from InterLab Service Company ...
            </p>
            <a class="read-more" href="/partners/view/interlabservice">Read More</a>
        </div>
        <div class="partner-box">
            <img src="partner/logo_corpo[1].jpg" width="218" height="65" />
            <p>
                IPSOGEN is currently the world leader in blood cancer molecular diagnostics ...
            </p>
            <a class="read-more" href="/partners/view/Ipsogen">Read More</a>
        </div>
        <div class="partner-box">
            <img src="partner/partner_cytocell.gif" width="218" height="65" />
            <p>
                IPSOGEN is currently the world leader in blood cancer molecular diagnostics ...
            </p>
            <a class="read-more" href="/partners/view/cytocell">Read More</a>
        </div>
        <div class="partner-box">
            <img src="partner/aid.jpg" width="218" height="65" />
            <p>
                IPSOGEN is currently the world leader in blood cancer molecular diagnostics ...
            </p>
            <a class="read-more" href="/partners/view/Aid-Diagnostika">Read More</a>
        </div>
    </div>
</div>

最后这是我的jquery script.i使用jquery-1.7.1.min.js：

<script type="text/javascript">
$(document).ready(function() {
    //img floating
    var lock = true;
    $('.prev-r').click(function() {
        if(lock == true){
            lock = false;
            var mleft = $('#pos').css('marginLeft');
            var mleft = mleft.slice(0,-2);
            var mleft = parseInt(mleft);
            var mleft = Math.abs(mleft);
            var left = 240;
            var next = mleft+left;
            chdis(next);
            $('#pos').animate({
                'marginLeft':'-'+next
                },"slow",function(){
                lock = true
                });
        }
    });
    $('.next-r').click(function() {
        if(lock == true){
            lock = false;
            var mleft = $('#pos').css('marginLeft');
            var mleft = mleft.slice(0,-2);
            var mleft = parseInt(mleft);
            var mleft = Math.abs(mleft);
            var left = 240;
            var next = mleft-left;
            chdis(next);
            $('#pos').animate({
                'marginLeft':'-'+next
                },"slow",function(){
                lock = true
                });
        }
    });
    function chdis(next){
        if(next == 0){
            $('.next-r').css('display','none');
        }else{
            $('.next-r').css('display','block');
        }
        var img = $("#pos img").length;
        var img = img * 240;
        var img = Math.abs(img);
        var img = img - 950;
        if(next == 480){
            $('.prev-r').css('display','none');
        }else{
            $('.prev-r').css('display','block');
        }
    }
});

Answer 1

我发现了我的问题。

IE会自动将#pos left-margin设置为auto。所以当我尝试对其进行切片并希望从其值中检索数字时（例如，希望从12获取数字） 12px）它给了我au（因为margin-left设置为auto）。
通过将left margin的{{1}}设置为零，滑块也可以在IE中使用祝你好运

jquery滑块在ie中不起作用

1 个答案: