在JQuery Slider上添加-webkit-linear-gradient时，-moz-linear-gradient break

本文介绍了在JQuery Slider上添加-webkit-linear-gradient时，-moz-linear-gradient break的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

TL; DR -webkit-linear-gradient正在打破-moz-linear-gradient

TL;DR -webkit-linear-gradient is breaking -moz-linear-gradient

所以听到这个难题，我正在使用带有两个的Jquery Slider插件在它上面的手柄，我有一个渐变作为背景颜色，以给外部范围一些颜色。我想要做的是在滑块移动时更新渐变的百分比。它适用于Chrome / Safari，但在使用-moz和-webkit标记时不适用于Firefox。该值是从第一个滑块的位置拉出的。

So hear's the conundrum, I'm using the Jquery Slider plugin with two handles on it and I have a gradient as the background color to give the outside ranges some color. What I'm trying to do is update the percentages on the gradients when the slider moves. It works in Chrome / Safari, but not in Firefox when both the -moz and -webkit tags are used. The value is being pulled from the position of the first slider.

当我只有-moz-linear-gradient标签时，它可以正常工作，但是只要我添加-webkit-linear-gradient标签就会中断Firefox。

When I only have the -moz-linear-gradient tag it works but as soon as I add the -webkit-linear-gradient tag it breaks for Firefox.

这是代码

HTML：

<div id="traffic-allocation">
    <h4 id="traffic-allocation-hed">Traffic Allocation <small>Change by dragging handles right or left and applying changes</small></h4>
    <div class="slideContainer">
        <div  id="slider-direct" class="slider"></div>
    </div>
</div>

<div class="labelBox">
     <div class="control-box" id="control-box-direct">
         <input id="control-direct" type="text" value="35%" class="allocation-control" />
         <div class='allocation-control-wrapper'>
             <h4 class="variantLabel mycontrol-label" id="mycontrol-label-direct">Control:  </h4>
         </div>
    </div>
</div>

JavaScript：

JavaScript:

$(function() {
$( '.slider' ).slider({
    range: true,
    values: [35, 70],
    min: 0,
    max: 100,
    step: 5,
    slide: function( e, ui ) {

    //Derive calling (class selector) element's ID and set the IDs for its "companion" value displays:
    theSegment = e.target.id.slice(7);
    theControl = '#control-' + theSegment;

        $( theControl ).val( ui.values[ 0 ] + '%' );

        var slidercolor = $('#control-direct').val();
        $('.ui-slider-horizontal').css({
            background: '#0e76bc', /* Old browsers */
            background: 'linear-gradient(to right,  #0e76bc '+slidercolor+',#e78f08 '+slidercolor+')' ,/* W3C */
            background: '-moz-linear-gradient(left,  #0e76bc '+slidercolor+', #e78f08 '+slidercolor+')', /* FF3.6+ */
            background: '-webkit-linear-gradient(left,  #0e76bc '+slidercolor+',#e78f08 '+slidercolor+')' /* Chrome10+,Safari5.1+ */

        })
    }
});

CSS：

h1 {
    font-family: Helvetica, Arial;   
    font-weight: bold;
    font-size: 18px;
}

body, p{
    font-family: Helvetica, Arial;
}

.ui-slider-horizontal{
    background: '#0e76bc', /* Old browsers */
    background: linear-gradient(to right,  #0e76bc 50%,#e78f08 50%); /* W3C *
    background: -moz-linear-gradient(left,  #0e76bc 50%, #e78f08 50%); /* FF3.6+ */
    background: -webkit-linear-gradient(left,  #0e76bc 50%,#e78f08 50%); /* Chrome10+,Safari5.1+ */

}
.ui-widget-header {
    background: none repeat scroll 0 0 #292668;
    border: 1px solid #CCCCCC;
    color: #292668;
    font-weight: bold;
}

这是一个链接，可以看到发生了什么，而css因为有很多它:)。（在chrome / safari中打开以查看它应该做什么以及firefox看它打破了）

Here's a link to see what's going on and the css cause there's a lot of it :). (open in chrome/safari to see what it's supposed to do and firefox to see it broken)

提前谢谢：）

gradient

在JQuery Slider上添加-webkit-linear-gradient时，-moz-linear-gradient break

问题描述

推荐答案