CSS - 从不同的浏览器中返回不同的值

Question

当我使用jQuery获取对象的CSS值时，各个浏览器（包括IE、Mozilla、Chrome等）返回的值是不同的。

例如，在Chrome中，背景图像(.css("background-image"))返回的值为:

url(http://i41.tinypic.com/f01zsy.jpg)

在 Mozilla 中，它返回：

url("http://i41.tinypic.com/f01zsy.jpg")

我在其他方面也遇到了同样的问题，比如背景大小。

在Chrome中返回：

50% 50%

但是Mozilla返回：

50%+50%

我的问题是，我有一些函数可以根据空格 .split(" ") 来分离CSS（background-size）等，但这在Mozilla上可能无法正常工作，因为它使用 + 而非空格。

是否有任何方法可以解决这个问题并使浏览器使用一个标准？

是否可以编写任何函数，根据用户使用的浏览器类型来获取和拆分值？

- zuc0001

---

我真的想不出有什么情况是你自己没有设置这些CSS值的... - Nicolas Le Thierry d'Ennequin

@NicolasLeThierryd'Ennequin 我有点困惑。你是什么意思？ - zuc0001

例如，默认的background-size属性将是“auto”（或“auto auto”）。如果您在脚本中明确设置了background-size为另一个值，则意味着可以不使用$().css方法检索它而直接知道它。或者，您正在尝试在属性被动画时读取该值？ - Nicolas Le Thierry d'Ennequin

这是一个非常基本的演示，展示了我的意思：http://jsbin.com/niguta/edit?js,output - Nicolas Le Thierry d'Ennequin

@NicolasLeThierryd'Ennequin 我明白了。我的代码也很相似，但是一旦设置了背景，它会执行：$("something").css("backgroundSize") 以便获取它们（如果有人从文本框中编辑了值，则可能会将错误的值插入数据库）。 - zuc0001

Answer 1

我的问题是，我有一些函数可以拆分CSS（例如基于空格.split(" ")的background-size），但这在Mozilla上可能无法工作，因为它使用+。尝试将\+添加到传递给.split的RegExp中。.split(/\s|\+/)

var res = ["50%+50%", "50% 50%"];

var re = /\s+|\+/;

console.log(res[0].split(re), res[1].split(re));

- guest271314

---

非常好的例子。非常感谢！ - zuc0001

Answer 2

不同的浏览器使用不同的CSS标准，您可能需要编写完整的解析器来使它们符合一个标准。

解决方法是您应该拆分或使用CSS值，考虑到不同浏览器的标准。例如，可以使用以下方法解决CSS(background-size)问题:

space.split("\\s|\\+"); //split my string where it either has a space 'or' a plus sign

对于CSS（背景图像），解决方案可能是在使用之前替换引号：

space.replace("\"", "");

尝试使分隔符适用于所有浏览器。希望这有所帮助。

- Manu

Answer 3

这可能不是最干净的方法，但您可以运行字符串解析器来删除任何引号，以获取背景图像源。这将是解析背景图像URL最有效的方法。它应该可以在不破坏数据的情况下工作，因为URL通常不能包含引号，因为它们被编码为%22

至于background-size，您可以解析结果中的+号，并将其更改为空格，因为+号通常不作为任何CSS属性的值存在，所以您在删除这些内容时应该相对安全。

此外，您可以检查浏览器类型，以确定是否需要首先运行这些解析操作。作为预防措施，您还应该查看Opera和Safari返回的结果，如果这些结果有所不同，您可以创建分支语句来处理不同浏览器返回的不同类型的CSS值的解析器。

注意：我描述的解析方法旨在将Firefox结果转换为Chrome样式结果。

- Gabriel Garrett

---

谢谢提供信息！我将创建一些函数，以删除图像中的“ ”，还有另一个函数（就像来自guest271314的答案中所述）可以删除+。 - zuc0001

Answer 4

感谢你的所有帮助。

我将分享我最终使用的代码！

cssCommas: function(text)
{
    return text.replace(new RegExp("\"", "g"),"");
},

cssPlus: function(text)
{
    return text.replace(new RegExp("\\+", "g"),"");
},

cssSplit: function(text,removePercent)
{
    var removeParent = removeParent || false;
    if(removePercent == true)
    {
        text = text.replace(new RegExp("%", "g"),"");
    }
    return text.split(new RegExp("\\s|\\+","g"));
},

css: function(text)
{
    return this.cssCommas(this.cssPlus(text));
}

现在在所有浏览器上都能完美运行了。非常感谢。

- zuc0001