经过对各种浏览器的测试发现,以Webkit和Presto为内核的浏览器会出现如下情况:
当父容器width%5!=0,子元素左右布局width分别为A_width+B_width=100%,问题见图
当打开一个宽度%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的?可能会是其他值,这种情况应该能够说明,渲染的算法可能是小数点进位上出现了问题。
- 大小: 21.4 KB
- 大小: 13.9 KB
分享到:
相关推荐
Cef浏览器内核,功能完整,VS2013项目,附有编程例子
测试浏览器内核版本
这个WebKit.NET-0.5是chrome的浏览器内核,可以用c#自己做一个简单的浏览器
因此,所谓的浏览器内核 通常也就是指浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解析也有所不同,因 此同一网页在不同的内核浏览器里的...
VB环境下使用非IE内核的浏览器控件,Google
浏览器内核检测工具浏览器内核检测工具浏览器内工具.核检测工具浏览器内核检测工具浏览器内核检测工具ss
java调用chrome浏览器内核,cef实现,非jxbrowser,非常不错
Android framework 系统编译 新版WebView浏览器内核101.0.4951.61
用于调试各大游戏引擎(UE5)内置浏览器CEF
C# chrome内核浏览器,测试完美,本人环境vs2015,内附有demo
浏览器内核介绍,主要介绍国内浏览器厂商使用的三大浏览器内核
MFC通过CEF封装Chrome浏览器内核的Demo,实现网页的前进、后退功能
判断浏览器内核是微信还是QQ 安卓还是IOS 根据结果写样式与方法
(整理)了解上网浏览器内核基础知识.pdf
腾讯 X5 浏览器内核 静态 集成demo。 1.demo1:以复制到SD卡中进行安装集成,可动态集成 2.demo2:以so包的方式集成
易语言谷歌69内核最新浏览器源码!使用精易Web浏览器支持库。@1185384801。
对常用的浏览器的内核进行比较,分析优缺点,详细讲解目前的双核浏览器
csEXWB基于c#,开源的爽啊。
webkitbrowser的dll 内核是谷歌浏览器与IE浏览器//////////////////////////// WebKit是开源的Web浏览器引擎,苹果的Safari、谷歌的Chrome浏览器都是基于这个框架来开发的。
浏览器内核浏览器内核浏览器内核浏览器内核浏览器内核浏览器内核浏览器内核浏览器内核浏览器内核浏览器内核浏览器内核浏览器内核浏览器内核浏览器内核浏览器内核浏览器内核浏览器内核浏览器内核