Javascript 使用getComputedStyle的Safari中是否存在错误？_Javascript_Html_Safari_Webkit

Javascript 使用getComputedStyle的Safari中是否存在错误？

javascript html safari

Javascript 使用getComputedStyle的Safari中是否存在错误？,javascript,html,safari,webkit,Javascript,Html,Safari,Webkit,正如我所知，safari和chrome都是基于webkit的浏览器，但当我使用getComputedStyle时，它看起来就不同了。Chrome，IE，FF全部echo'50px，而safari echo'10%。这对工作来说真的很不方便。这是一个狩猎迷还是我犯了一个错误 Safari中针对win V5.1.7和IOS6/7的演示测试下面是一个演示： <!doctype html> <html lang="en"> <head> <meta cha

正如我所知，safari和chrome都是基于webkit的浏览器，但当我使用getComputedStyle时，它看起来就不同了。Chrome，IE，FF全部echo'50px，而safari echo'10%。这对工作来说真的很不方便。这是一个狩猎迷还是我犯了一个错误

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>


文件
*{边距：0；填充：0；}
身体{
位置：相对位置；
高度：500px；
}
#试验{
位置：绝对位置；
排名前10%；
左：10%；
宽度：100px；
高度：100px；
背景色：#000；
}
window.onload=函数（）{
var oTest=document.getElementById（'test'）；
var iLeft=window.getComputedStyle（oTest，null）['top']；
控制台日志（iLeft）；
警报（iLeft）；
}

您可以使用：

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

编辑1:

试试这个：

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

。我还试了一下，结果是正确的。但可能是模拟器的手机，你在桌面上。顺便说一句，您使用的是最新的Safari版本吗？

它仍然存在于Safari 7.1中。Blink引擎为Chrome应用了一个匹配IE9和Firefox行为的浏览器。但遗憾的是，这种变化还没有移植到Webkit

由于浏览器的不同，没有真正定义最初应该返回什么getComputedStyle，其中一些问题至今仍在讨论中。这有点混乱

我想说的是要么避免百分比，要么就你的例子来说，你必须做一个跨浏览器兼容性，在

主体上做一个getComputedStyle
，除以10。
好吧，但safari应该为我做这件事，对吗？@user2926630是的，但我刚刚给出了解决这个问题的方法。谢谢编辑，但在Safari的WinV5.1.7和ios6版本中，它仍然会发出“10%”的警报/7@user2926630那么我真的很抱歉，我不知道。@HighBoots如果您设置了px
值，但不使用%
，它会工作。看看我的理由。