Question

据我所知，safari和chrome都是基于webkit的浏览器，但是当我使用getComputedStyle时，它看起来不同。 Chrome，IE，FF都回显'50px'，但safari回声是'10％'。这对工作来说真的很不方便。这是一个safari bug还是我犯了错误？

在Safari中为win V5.1.7和IOS6 / 7进行的演示测试这是一个演示：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0; padding:0;}
body{
    position: relative;
    height: 500px;
}
#test{
    position: absolute;
    top: 10%;
    left: 10%;
    width: 100px;
    height: 100px;
    background-color: #000;
}
</style>
<script>
window.onload = function () {
    var oTest = document.getElementById('test');
    var iLeft = window.getComputedStyle(oTest, null)['top'];
    console.log(iLeft);
    alert(iLeft);
}
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>

Answer 1

Safari 7.1中仍然存在bug。 Blink引擎为Chrome应用patch以匹配IE9和Firefox的行为。但遗憾的是，这一变化尚未移植到Webkit。

由于浏览器的不同，CSSOM spec并没有真正定义getComputedStyle最初应该返回的内容，其中一部分是still not fully。这有点混乱。

我要么说要么避免百分比，要么就你的例子而言，你必须通过getComputedStyle上的body除以10来实现跨浏览器兼容性fallback method

Answer 2

您可以使用：

var font = "10%"; // suppose got 10%
if (font.indexOf("%") > -1) {
    font = font.substr(0, font.length - 1);   // get the `10`
    font = parseInt(font, 10);  // convert to number
    var w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0],
        width = w.innerWidth || e.clientWidth || g.clientWidth;  // the width

    alert((font * width) / 100);  // alert (percent * width / 100)
} else {
    alert(font); // font is normal (in px,etc.)
}

Live Demo

编辑1：

试试这个：

var oTest = document.getElementById('test');
var iLeft = window.getComputedStyle(oTest).getPropertyValue("top");
alert(iLeft);

This again works for me。我也在Mobile Safari simulator上尝试了它，它给出了正确的结果。但可能是模拟器的移动设备，你在桌面上。顺便说一句，您使用的是最新的Safari版本吗？

Safari中有getComputedStyle的错误吗？

2 个答案:

Live Demo