四种浏览器内核测试100%≠20%+80% 浏览器Chromewebkit算法Opera

程序员文章站 2024-02-20 20:53:35

...

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

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

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

浏览器Chromewebkit算法Opera

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

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

浏览器Chromewebkit算法Opera

我觉得是内核对百分比算法上可能存在问题，已经将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的?可能会是其他值，这种情况应该能够说明，渲染的算法可能是小数点进位上出现了问题。