Question

当我使用jQuery获取对象的CSS值时，每个浏览器（IE，Mozilla，Chrome等）都会返回不同的值。

例如，在Chrome中，背景图片（.css（＆＃34; background-image＆＃34;））会返回：

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

在Mozilla中，它返回：

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

我在其他方面遇到同样的问题，例如background-size。

在Chrome中它返回：

50% 50%

但Mozilla回归：

50%+50%

我的问题是，我有分割CSS（背景大小）的功能，例如基于空格.split（＆＃34;＆＃34;），但这不适用于Mozilla，因为它使用+代替。

有什么办法可以解决这个问题并让浏览器使用一个标准吗？

根据用户使用的浏览器类型，是否有任何我可以写入哪些抓取和拆分值的函数？

Answer 1

我的问题是，我有分割CSS的功能（background-size），例如基于空格.split（“”），但是这个无法在Mozilla上运行，因为它使用+代替。

尝试将\+添加到RegExp传递给.split

.split(/\s|\+/)

var res = ["50%+50%", "50% 50%"];

var re = /\s+|\+/;

console.log(res[0].split(re), res[1].split(re));

Answer 2

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

对于background-size，你可以解析+符号的结果并将它们更改为空格，因为+符号通常不会作为任何CSS属性的值出现，所以你应该相对安全地服用那些。

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

注意：我所描述的解析方法尝试将Firefox结果转换为Chrome风格的结果。

Answer 3

不同的浏览器使用不同的CSS标准，您可能必须编写一个完整的解析器，使它们成为标准。

解决方法是，您应该考虑不同的浏览器标准来拆分或使用CSS值。像CSS（背景大小）问题可以用这个来解决：

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

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

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

尝试为所有浏览器进行通用分割。希望有所帮助。

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));
}

现在可以在所有浏览器上完美运行。非常感谢。

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

4 个答案: