四种浏览器内核测试100%≠20%+80%

feiguo · 发表于 2011-7-30 09:24

经过对各种浏览器的测试发现，以Webkit和Presto为内核的浏览器会出现如下情况：

当父容器width%5!=0，子元素左右布局width分别为A_width+B_width=100%，问题见图

当打开一个宽度%5==0的窗口时，这个像素差值就没有了。（当然你也可以尝试拖动改变窗口大小，发现右边没有差值的时候，点击“Our width?”可以查看这时的所有元素的宽度）

我觉得是内核对百分比算法上可能存在问题，已经将BUG提交给Webkit了，让他们测试一下是不是有这个问题吧。
Html代码

<!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>

复制代码

<!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的?可能会是其他值，这种情况应该能够说明，渲染的算法可能是小数点进位上出现了问题。

紫衿 · 发表于 2011-7-30 09:24

猜測可能算的寬度的時候直接就把小數點后面的給忽略了。少了些算法快些三，你也可以這樣理解 chrome是便宜貨嘛將就點用。

broken · 发表于 2011-7-30 09:24

chrome 4.0.279.0
表示没有重现

话说我当年 · 发表于 2011-7-30 09:24

chrome 4.0.2222.12
同样有问题.

Jethro · 发表于 2011-7-30 09:25

不单单只有Chrome会有这个问题，而是基于Webkit和Presto(Opera)引擎的浏览器都出现了这个问题，我又进一步测试过了，应该能确定是小数点进位的问题了。

fl · 发表于 2011-7-30 09:25

我觉得还是尽量不要用这种方式写百分比的好，你觉得浏览器应该怎么处理才好？四舍五入？会引发更多问题的baby。因为浏览器也不知道你到底要怎么做。好比说一共50像素，分成33%、34%、33%，你觉得浏览器计算出什么样呢width更好一些呢？

郁闷小男人 · 发表于 2011-8-7 11:08

我赞成。嘿嘿

找不到我 · 发表于 2011-8-11 14:30

不错不错比我强多了

木已 · 发表于 2011-8-13 10:57

今天再看下

木已 · 发表于 2011-8-17 12:21

…没我说话的余地…飘走

走就走吧 · 发表于 2011-9-15 10:24

我帮不了你

帐号		自动登录	找回密码
密码			成为会员