chrome,也就是webkit内核下作的检测, chrome版本是40, -webkit-box这种布局在移动端用的比较多,主要是因为pc端的浏览器内核参差不齐。 因为在写HTML的时候看上了-webkit-box的自动根据浏览器窗口大小自动排列的智能布局, 所以我也入了坑, 坑是这样的:

<!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>
</head>
<body>
<style>
*{
margin:0;
paddign:0;
}
.webbox{
display: -webkit-box;
}
.webbox-vertical{
display: -webkit-box;
-webkit-box-orient:vertical;
}
.box-flex{
-webkit-box-flex:1;
}
body,html,#div{
width:100%;
height:100%;
}
.auto{
overflow:auto;
}
</style> <div id="div" class="webbox-vertical"> <div class="webbox">
............<br />
............<br />
</div>
<div class="webbox">
ddd<br />
ddd<br />
ddd<br />
ddd<br />
</div>
<div class="webbox box-flex">
<div class="webbox box-flex auto">
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<span>sfsdfsfsfsd</span>
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<span>sfsdfsfsfsd</span>
<a href="###">aaa</a><br />
<span>sfsdfsfsfsd</span>
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<span>sfsdfsfsfsd</span>
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br />
<a href="###">aaa</a><br /><input class="input-index ng-pristine ng-untouched ng-valid" ng-disabled="topic.checked" ng-model="topic.checked" data-topic-id="15Q2700664" type="checkbox"><br /> <a href="###">aaa</a><br /><input class="input-index ng-pristine ng-untouched ng-valid" ng-disabled="topic.checked" ng-model="topic.checked" data-topic-id="15Q2700664" type="checkbox"><br /> <a href="###">aaa</a><br /><input class="input-index ng-pristine ng-untouched ng-valid" ng-disabled="topic.checked" ng-model="topic.checked" data-topic-id="15Q2700664" type="checkbox"><br /> <a href="###">aaa</a><br /><input class="input-index ng-pristine ng-untouched ng-valid" ng-disabled="topic.checked" ng-model="topic.checked" data-topic-id="15Q2700664" type="checkbox"><br /> <a href="###">aaa</a><br /><input class="input-index ng-pristine ng-untouched ng-valid" ng-disabled="topic.checked" ng-model="topic.checked" data-topic-id="15Q2700664" type="checkbox"><br /> <a href="###">aaa</a><br /><input class="input-index ng-pristine ng-untouched ng-valid" ng-disabled="topic.checked" ng-model="topic.checked" data-topic-id="15Q2700664" type="checkbox"><br />
</div>
<div class="webbox">
111111111<br />
111111111<br />
111111111<br />
111111111<br />
</div>
</div> </div>
<script>
var aS = document.getElementsByTagName("span");
for(var i = 0; i < aS.length ; i++) {
aS[i].addEventListener("click",function(ev){
console.log(ev);
})
};
/*
chrome浏览器在webbox布局下的一个bug;
如果你的webbox布局下的元素里面存在a链接或者audio,checkbox这些元素,
当你点击这些元素, 滚动条会滚到最上面, 扯淡扯大了, 我勒个去;
*/
</script>
</body>
</html>

  在webkit-box的布局元素中,如果你点击了a链接,这个链接的href为###, 如果这个元素的父级有滚动条,滚动条居然会自动滚到最上面(正常情况下不会跳的);

太扯淡的说,

  解决方法就是:在webkit-box布局的元素中添加一个元素样式为width:100%;position:relative;overflow:auto;,

  然后在这个元素的子元素再添加一个元素为样式为left:0;top:0;bottom:0;position:absolute; 然后把需要的滚动的HTML代码放进去, 滚动条出现了。。

  这个是为什么我也搞不懂; 因为在mathon(遨游浏览器)测试没有这个问题, 归结为浏览器问题,上网也没找到资料, 记录下来, 防坑;

  实现的代码如下:

<!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>
</head>
<body>
<style>
*{
margin:0;
paddign:0;
}
.webbox{
display: -webkit-box;
}
.webbox-vertical{
display: -webkit-box;
-webkit-box-orient:vertical;
}
.box-flex{
-webkit-box-flex:1;
}
body,html,#div{
width:100%;
height:100%;
}
.auto{
overflow:auto;
}
</style> <div id="div" class="webbox-vertical"> <div class="webbox">
............<br />
............<br />
</div>
<div class="webbox">
ddd<br />
ddd<br />
ddd<br />
ddd<br />
</div>
<div class="webbox box-flex">
<div class="webbox box-flex">
<div style="width:100%;position:relative;overflow:auto;">
<div style="left:0;top:0;bottom:0;position:absolute;">
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<span>sfsdfsfsfsd</span>
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<span>sfsdfsfsfsd</span>
<a href="####">aaa</a><br />
<span>sfsdfsfsfsd</span>
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<span>sfsdfsfsfsd</span>
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br />
<a href="####">aaa</a><br /><input class="input-index ng-pristine ng-untouched ng-valid" ng-disabled="topic.checked" ng-model="topic.checked" data-topic-id="15Q2700664" type="checkbox"><br /> <a href="####">aaa</a><br /><input class="input-index ng-pristine ng-untouched ng-valid" ng-disabled="topic.checked" ng-model="topic.checked" data-topic-id="15Q2700664" type="checkbox"><br /> <a href="####">aaa</a><br /><input class="input-index ng-pristine ng-untouched ng-valid" ng-disabled="topic.checked" ng-model="topic.checked" data-topic-id="15Q2700664" type="checkbox"><br /> <a href="####">aaa</a><br /><input class="input-index ng-pristine ng-untouched ng-valid" ng-disabled="topic.checked" ng-model="topic.checked" data-topic-id="15Q2700664" type="checkbox"><br /> <a href="####">aaa</a><br /><input class="input-index ng-pristine ng-untouched ng-valid" ng-disabled="topic.checked" ng-model="topic.checked" data-topic-id="15Q2700664" type="checkbox"><br /> <a href="####">aaa</a><br /><input class="input-index ng-pristine ng-untouched ng-valid" ng-disabled="topic.checked" ng-model="topic.checked" data-topic-id="15Q2700664" type="checkbox"><br /> </div>
</div>
</div>
<div class="webbox">
111111111<br />
111111111<br />
111111111<br />
111111111<br />
</div>
</div> </div>
<script>
var aS = document.getElementsByTagName("span");
for(var i = 0; i < aS.length ; i++) {
aS[i].addEventListener("click",function(ev){
console.log(ev);
})
};
/*
chrome浏览器在webbox布局下的一个bug;
如果你的webbox布局下的元素里面存在a链接或者audio,checkbox这些元素,
当你点击这些元素, 滚动条会滚到最上面, 扯淡扯大了, 我勒个去;
*/
</script>
</body>
</html>

  平常布局上面要注意符合html标准,要么会死的很惨。

  张鑫旭的webkit相关资料,可以学习一下,打开;

  w3c的资料打开

  

  

在chrome下-webkit-box布局的一个bug的更多相关文章

  1. 记录Window系统下myeclipes连接linux下mysql所出现的一个bug

    记录myeclipes远程连接mysql所出现的一个bug 今天在玩框架hibernate时,出现一个非常费解的bug,话不多说,先看bug Access denied for user 'root' ...

  2. Chrome 下,重复使用 XMLHttpRequest进行Post数据时,遇到一个奇怪的问题

    var http_request; //在外面申明对象,主要为了在updatePage中使用     //无刷新更新内容 function post(url,parameter) {        i ...

  3. 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...

  4. C-Flex 与 box布局教程

    http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html -阮一峰老师 http://www.w3cplus.com/css3/flexbox- ...

  5. flutter系列之:把box布局用出花来

    目录 简介 LimitedBox SizedBox FittedBox 总结 简介 flutter中的layout有很多,基本上看layout的名字就知道这个layout到底是做什么用的.比如说这些l ...

  6. Chrome出了个小bug:论如何在Chrome下劫持原生只读对象

    Chrome出了个小bug:论如何在Chrome下劫持原生只读对象 概述 众所周知,虽然JavaScript是个很灵活的语言,浏览器里很多原生的方法都可以随意覆盖或者重写,比如alert.但是为了保证 ...

  7. 分享在winform下实现左右布局多窗口界面-续篇

    之前的这篇文章<分享在winform下实现左右布局多窗口界面>已经实现了左右布局多窗口界面,今天本来是研究基于winform的插件编程,没想到顺便又找到了另一种实现方案,这种实现方案更简单 ...

  8. 如何在Chrome下Debug Mocha的测试

    简介 经过前两篇文章的介绍,相信读者对Mocha应该有一定的认知了,本文重点讲述如何在Chrome下Debug Mocha Test, 方便你在测试fail的时候troubleshooting. 关键 ...

  9. ie8下使用knockoutjs遇到的一个模板异常

    ViewModel中有一个数组,代码大概如下: function ReportViewModel(){ var self = this; self.extendedProperties = ko.ob ...

随机推荐

  1. CF 672C Recycling Bottles[最优次优 贪心]

    C. Recycling Bottles time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  2. android源码framework下添加新资源的方法

    编译带有资源的jar包,需要更改frameworks层,方法如下: 一.增加png类型的图片资源 1.将appupdate模块所有用到的png格式图片拷贝到framework/base/core/re ...

  3. FFmpeg中HLS文件解析源码

    不少人都在找FFmpeg中是否有hls(m3u8)解析的源码,其实是有的.就是ffmpeg/libavformat/hlsproto.c,它依赖的文件也在那个目录中. 如果要是单纯想解析HLS的话,建 ...

  4. Ionic实战四:ionic 即时通讯_ionic仿雅虎邮箱

    此产品是一款Ionic版微博.微信.朋友圈效果(微博.微信.聊天列表.聊天窗口.个人界面.编辑个人信息等)购买后二次开发方便快捷.    

  5. Qt Creator 常用快捷键

    多行注释模式                                                                                            Ct ...

  6. lecture12-玻尔兹曼机和受限玻尔兹曼机

    这是Hinton的第12课,结合前一课可以知道RBM是来自BM,而BM是来自Hopfield的,因为水平有限,是直译的,虽然有时候会看不懂,但是好歹不会曲解原来的本意,看的话:1.先看ppt:2.通读 ...

  7. Bootstrap系列 -- 9. 表格

    一. Bootstrap 表格样式支持 Bootstrap提供了六种不同风格的样式支持,其中一个基础样式,4个附件样式,1个响应式设计样式 1. .table:基础表格 2. .table-strip ...

  8. 7z压缩文件时排除指定的文件

    分享一个7z压缩文件时排除指定文件类型的命令行,感觉很有用: 7z a -t7z d:\updateCRM.7z d:\updateCRM\*.* -r -x!*.log -x!*bak a:创建压缩 ...

  9. [HDU5902]GCD is Funny(xjb搞)

    题意:n个数每次选三个数删除,取其中两个数将gcd放回去两次,问最后剩的数可能是多少 分析:考虑最优情况: 先拿出三个数,留下两个x,x  再来一个y,(x,x,y)我们可以删去一个x,留下两个gcd ...

  10. Matlab中给figure添加图例(legend),标题(title)和颜色(color)

    在Matlab绘图过程中,尤其是需要将多个图绘制在相同的坐标轴中时,通常需要将不同的曲线设置成为不同的颜色.此外,为了直观,还需要给这张图标增添标题和图例.这篇文章展示了在Matlab的绘图窗口(fi ...