- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
TL;DR -webkit-linear-gradient 正在打破 -moz-linear-gradient
听说是个难题,我使用的是带有两个 handle 的 Jquery Slider 插件,我使用渐变作为背景颜色,为外部范围提供一些颜色。我想要做的是在 slider 移动时更新渐变的百分比。它适用于 Chrome/Safari,但在同时使用 -moz 和 -webkit 标签时不适用于 Firefox。该值是从第一个 slider 的位置拉出的。
当我只有 -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/
提前谢谢你:)
最佳答案
您只能为给定元素的任何单个样式属性设置一个值。您得到的是您在 CSS 文件中所做的,但这不是 .css()
方法所做的。它直接在每个受影响的 DOM 元素上扰乱了 style
对象的属性。因此,当您设置“-moz-linear-gradient”时,您将清除“linear-gradient”,而当您设置它时,您将清除简单的颜色设置。
按类或其他方式在 CSS 中设置您的样式,然后在您想选择一种设置或另一种设置时在 JavaScript 中设置类。
关于javascript - -moz-linear-gradient 在 JQuery Slider 上添加 -webkit-linear-gradient 时中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12201355/
我想替换以下特定于 Mozilla 的 CSS 规则: background: -moz-linear-gradient(center top , #F5F5F5, #E4E4E4); 使用标准 li
我正在将 MatLab 程序转换为 Python,我无法理解为什么 scipy.interpolate.interp2d(linear) 给出的结果与 MatLab interp2(linear) 不
我目前在自然语言处理方面开发的应用程序存在严重的性能问题。基本上,对于给定的文本,它会收集各种数据并进行一些数字运算。 对于每一个句子,它的作用完全相同。用于收集统计数据的算法不会随着先前读取的数据而
我正在为一个基本的 Android 计算器开发水平 View ,我有一个名为 linearLayout2 的 LinearLayout > 我试图将它放在 linearLayout3 之上,其中包含数
我为按钮的背景使用了一些 CSS,但它在 Firefox、Chrome 和 IE 中看起来不同。 我正在使用 -webkit-linear-gradient 和 -moz-linear-gradien
TL;DR -webkit-linear-gradient 正在打破 -moz-linear-gradient 听说是个难题,我使用的是带有两个 handle 的 Jquery Slider 插件,我
我突然想到,例如,假设我们有二维 N 点的训练数据。我们知道我们总是可以天真地构建一个决策树,以便我们可以对每个数据点进行分类。 (可能我们过拟合了,深度可以到2N) 但是,我们知道如果数据集是线性可
我对插值函数的一般求根问题感兴趣。 假设我有以下 (x, y)数据: set.seed(0) x = x[i]) & (rroots <= x[i + 1])] ## next piece
我有一个线性优化目标来最大化 EE+FF,其中 EE 和 FF 每个都包含一些 C 和 D。 使用我编写的代码,我可以让求解器找到: EE_quantity: 0, FF_quantity: 7 ..
我一直在寻找这个问题,但我无法理解这个问题的含义。 问题: Write a program in any language to determine how your computer handles
我在 Python 中有一个简单的线性多元回归,如下所示: X_train,X_test,y_train,y_test=train_test_split(x_cols,df['Volume'],tes
关闭。这个问题是off-topic .它目前不接受答案。 想改善这个问题吗? Update the question所以它是 on-topic对于堆栈溢出。 10年前关闭。 Improve this
对于大型稀疏迭代(共轭梯度、MINRES、GMRES 等)线性代数系统求解,有哪些更好的库?我经常编写自己的程序,但我很想知道人们更喜欢哪种“现成的”软件包。我听说过 PETSc、TAUCS、IML+
这是我的全部问题: 信息: *最大限度。总投资:125美元 *支付是购买的单位x支付/单位的总和 *每笔投资成本:买入成本+成本/单位x单位数量(如果您购买至少一个单位) *费用为每笔投资费用之和 限
我有两个变量:x>= 0 和 y 二进制(0 或 1),我有一个常数 z >= 0。如何使用线性约束来描述以下条件: If x = z then y = 1 else y = 0. 我试图通过定义另一
我正在尝试做一些逻辑上应该可以做的事情。但是,我不确定如何在线性规划领域内做到这一点。我正在使用 ZMPL/SCIP,但这对大多数人来说应该是可读的。 set I := {1,2,3,4,5}; pa
我正在为我的期中考试做准备,我正在解决算法书中的一些问题,但似乎无法弄清楚以下问题: 在实数 a 和 b 上找出线性规划的充分必要条件 max: x+y ax + by 0 (a) 是不可行的。 (b
我正在做一个 Java 项目,我必须计算一个多元线性回归,但我希望得到的参数是非负的。是否有现有的商业友好许可图书馆来做这样的事情?我一直在寻找非负最小二乘库,但没有成功。 最佳答案 好吧,我找不到任
密集线性代数在现实世界中的常见应用是什么? 使用线性代数作为人机之间的通用语言,可以轻松描述和高效计算许多问题。尽管这些系统通常需要稀疏矩阵的解,而不是稠密矩阵。违反此规则的常见应用有哪些? 我很好奇
我如何找到 广义特征值、向量 使用 Eigen3 图书馆? 在 Octave ,matlab,特征值函数的形式是:[V, lambda] = eig (A, B) . 我只能找到 this 类(cla
我是一名优秀的程序员,十分优秀!