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

When I am using jQuery to grab CSS values for objects, each of the browsers (IE, Mozilla, Chrome, etc) returns different values.

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

For example, in Chrome, a background image (.css("background-image")) returns:

例如,在Chrome中,背景图片(.css(“background-image”))会返回:

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

Where in Mozilla, it returns:

在Mozilla中,它返回:

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

I am having the same problem on other aspects, such as background-size.

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

In chrome it returns:

在chrome中它返回:

50% 50%

But Mozilla returns:

但Mozilla回归:

50%+50%

My problem with this is, I have functions that split the CSS (background-size), for example based on a space .split(" "), but this could not work on Mozilla because it uses a + instead.

我的问题是,我有分割CSS(背景大小)的函数,例如基于空格.split(“”),但这对Mozilla不起作用,因为它使用了+代替。

Is there any way that I can fix this problem and make the browsers to use one standard?

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

Is there any function that I could write which grabs and splits values, based on the type of browser the user is using?

根据用户使用的浏览器类型,是否有任何我可以编写的功能可以抓取和分割值?

4 个解决方案

#1

Different browsers use different CSS standards and you may have to write a full-blown parser to make them one standard.

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

Workaround is that you should split or use CSS values taking into account the different browsers standards. Like the CSS(background-size) problem can be solved using this:

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

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

For CSS(background-image), the solution may be to replace the inverted commas before using it:

对于CSS(背景图像),解决方案可能是在使用之前替换引号:

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

Try to make the splits generallized for all browsers. Hope that helps.

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

#2

My problem with this is, I have functions that split the CSS (background-size), for example based on a space .split(" "), but this could not work on Mozilla because it uses a + instead.

我的问题是,我有分割CSS(背景大小)的函数,例如基于空格.split(“”),但这对Mozilla不起作用,因为它使用了+代替。

Try adding \+ to RegExp passed to .split

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

.split(/\s|\+/)

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

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

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

#3

This probably isn't the cleanest method, but you could run a string parser for the background image source and delete any quotation marks. This would be the most efficient method for parsing the background image URL. It should work without harming the data because URL's typically can't contain quotation marks, as they are encoded as %22

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

As for the background-size, you could parse the results for + signs and change those to spaces, as + signs typically aren't present as the values for any CSS properties, so you should be relatively safe in taking those out.

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

In addition, you could check the browser type to see if you'd even have to run these parsings in the first place. As a precaution, you should also see how Opera and Safari return results, and if those are any different, you could create branch statements for the parsers that handle the different types of CSS values returned by the different browsers.

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

Note: The parsing methods I have described attempt the goal of converting the Firefox results to the Chrome-style results.

注意:我所描述的解析方法尝试将Firefox结果转换为Chrome样式的结果。

#4

Thanks for all the help.

谢谢你的帮助。

I'll share the code I have ended up using!

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

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

Works perfectly on all browsers now. Thanks a lot.

现在适用于所有浏览器。非常感谢。

#1