jQuery - 向元素添加跨浏览器的 CSS 样式答案

【问题标题】：jQuery - Add cross-browser css styles to an elementjQuery - 向元素添加跨浏览器的 CSS 样式
【发布时间】：2014-02-28 17:18:57
【问题描述】：

我使用 jQuery 创建了一个按钮生成器，并希望将多个浏览器的样式添加到一个元素。我用这段代码来做这个：

    jQuery('.previewButton').css('background','');
    var s = jQuery('.bg_start_color').val();
    var e = jQuery('.bg_end_color').val();
    jQuery('.previewButton').css('background-color',s);
    jQuery('.previewButton').css('background','-webkit-gradient(linear, 0% 0%, 0% 100%, from('+s+'), to('+e+'))');
    jQuery('.previewButton').css('background','-webkit-linear-gradient(top,'+s+', '+e+')');
    jQuery('.previewButton').css('background','-moz-linear-gradient(top,'+s+','+e+')');
    jQuery('.previewButton').css('background','-ms-linear-gradient(top,'+s+','+e+')');
    jQuery('.previewButton').css('background','-o-linear-gradient(top,'+s+','+e+')');

我面临的问题是，当我在 Safari 中使用它时，-webkit- 样式会应用于元素 .previewButton。当我在 Firefox 中使用生成器时，-moz- 样式将应用于按钮。我想将按钮保存在数据库中，并且肯定想保存所有跨浏览器相关的样式，而不仅仅是我现在正在处理的样式。

但是，如果代码说应该全部应用，为什么只应用与浏览器相关的样式到元素上呢？我该如何改变呢？有人知道吗？

谢谢。

【问题讨论】：

只应用浏览器特定的样式，因为这就是浏览器本身所关心的。 Web 浏览器解释他们所知道的，并忽略他们不知道的任何东西。我不确定您所说的“将按钮保存在数据库中”是什么意思，您能否详细说明一下？
是的，当然。我想将预览按钮（包括用户应用的样式）添加到数据库中。当然，用户应该保存一个按钮的样式，它可以被所有浏览器解释，而不仅仅是用户正在处理的那个。
什么数据库？你是如何保存到这个数据库的？听起来您需要将样式直接保存到数据库中，而不是解释浏览器的样式。
是的。我创建了一个解决方法，将应该应用于按钮的样式存储在普通文本字段中，并将文本字段的值保存到数据库中......这很有效。

标签： jquery css

【解决方案1】：

跟踪颜色值，然后当您将样式写入数据库时，在 css 中包含所有浏览器特定样式 - 而不仅仅是当前应用于按钮的样式

【讨论】：

【解决方案2】：

浏览器只会应用他们理解的 CSS 样式。例如，Safari 不理解带有 -moz- 或 -ms- 前缀的样式，因此它会忽略它们。这就是为什么它可能不会出现在您的网络检查器中的原因。这并不意味着您的跨浏览器样式不存在。这只是意味着您当前的浏览器没有查看它们，因为它不理解它们。

别担心，一切正常。

【讨论】：