浏览 6723 次
|
锁定老帖子 主题：四种浏览器内核测试100%≠20%+80%
精华帖 (4) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (1)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-12-22
最后修改：2009-12-25
当打开一个宽度%5==0的窗口时，这个像素差值就没有了。（当然你也可以尝试拖动改变窗口大小，发现右边没有差值的时候，点击“Our width?”可以查看这时的所有元素的宽度）
我觉得是内核对百分比算法上可能存在问题，已经将BUG提交给Webkit了，让他们测试一下是不是有这个问题吧。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
html,body { width:100%;}
</style>
</head>
<body id="body" style="margin:0;padding:0;">
<div id="green" style="width:100%; background:green;">I'm green!</div>
<div id="red" style="width:20%; float:left; background:red;">I'm red!</div>
<div id="blue" style="width:80%; float:left; background:blue;">I'm blue!</div>
<input type="button" value="Our width?" onclick="showOurWidth()"/>
<input type="button" value="Open width%5==0" onclick="openWindow()"/>
<script type="text/javascript">
function getWidth(id) {
return document.getElementById(id).offsetWidth;
}
function showOurWidth() {
alert('Body width:'+getWidth('body'));
alert('Green width:'+getWidth('green'));
alert('Red width:'+getWidth('red'));
alert('Blue width:'+getWidth('blue'));
alert('Green width == Red+Blue = '+(getWidth('green')==(getWidth('red')+getWidth('blue'))));
}
function openWindow() {
window.open(window.location, '', 'width=500, height300');
}
</script>
</body>
</html>
补充：示例代码中是采用的20%和80%，如果是其他百分比(19% 81%)，width%?==0的?可能会是其他值，这种情况应该能够说明，渲染的算法可能是小数点进位上出现了问题。
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-12-24
猜測可能算的寬度的時候直接就把小數點后面的給忽略了。少了些算法快些三，你也可以這樣理解 chrome是便宜貨嘛 將就點用。
|
| 返回顶楼 | |
|
发表时间：2009-12-25
chrome 4.0.279.0
表示没有重现 |
| 返回顶楼 | |
|
发表时间：2009-12-25
chrome 4.0.2222.12
同样有问题. |
| 返回顶楼 | |
|
发表时间：2009-12-25
不单单只有Chrome会有这个问题，而是基于Webkit和Presto(Opera)引擎的浏览器都出现了这个问题，我又进一步测试过了，应该能确定是小数点进位的问题了。
|
| 返回顶楼 | |
|
发表时间：2009-12-28
我觉得还是尽量不要用这种方式写百分比的好，你觉得浏览器应该怎么处理才好？四舍五入？会引发更多问题的baby。因为浏览器也不知道你到底要怎么做。好比说一共50像素，分成33%、34%、33%，你觉得浏览器计算出什么样呢width更好一些呢？
|
| 返回顶楼 | |
