TL;DR -webkit-linear-gradient 正在破坏 -moz-linear-gradient
所以听到这个难题,我正在使用带有两个手柄的 Jquery Slider 插件,并且我有一个渐变作为背景颜色,以便为外部范围提供一些颜色。我要做的是在滑块移动时更新渐变的百分比。当同时使用 -moz 和 -webkit 标签时,它在 Chrome / Safari 中有效,但在 Firefox 中无效。该值是从第一个滑块的位置拉出的。
当我只有 -moz-linear-gradient 标签时,它可以工作,但是一旦我添加 -webkit-linear-gradient 标签,它就会在 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:
$(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 看看它坏了)
http://jsfiddle.net/DrewLandgrave/bep9A/
先感谢您 :)