在chrome下-webkit-box布局的一个bug
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的更多相关文章
- 记录Window系统下myeclipes连接linux下mysql所出现的一个bug
记录myeclipes远程连接mysql所出现的一个bug 今天在玩框架hibernate时,出现一个非常费解的bug,话不多说,先看bug Access denied for user 'root' ...
- Chrome 下，重复使用 XMLHttpRequest进行Post数据时，遇到一个奇怪的问题
var http_request; //在外面申明对象,主要为了在updatePage中使用 //无刷新更新内容 function post(url,parameter) { i ...
- 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系
问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...
- C-Flex 与 box布局教程
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html -阮一峰老师 http://www.w3cplus.com/css3/flexbox- ...
- flutter系列之:把box布局用出花来
目录 简介 LimitedBox SizedBox FittedBox 总结 简介 flutter中的layout有很多,基本上看layout的名字就知道这个layout到底是做什么用的.比如说这些l ...
- Chrome出了个小bug：论如何在Chrome下劫持原生只读对象
Chrome出了个小bug:论如何在Chrome下劫持原生只读对象 概述 众所周知,虽然JavaScript是个很灵活的语言,浏览器里很多原生的方法都可以随意覆盖或者重写,比如alert.但是为了保证 ...
- 分享在winform下实现左右布局多窗口界面-续篇
之前的这篇文章<分享在winform下实现左右布局多窗口界面>已经实现了左右布局多窗口界面,今天本来是研究基于winform的插件编程,没想到顺便又找到了另一种实现方案,这种实现方案更简单 ...
- 如何在Chrome下Debug Mocha的测试
简介 经过前两篇文章的介绍,相信读者对Mocha应该有一定的认知了,本文重点讲述如何在Chrome下Debug Mocha Test, 方便你在测试fail的时候troubleshooting. 关键 ...
- ie8下使用knockoutjs遇到的一个模板异常
ViewModel中有一个数组,代码大概如下: function ReportViewModel(){ var self = this; self.extendedProperties = ko.ob ...
随机推荐
- Carcraft
魔兽登录系统 创建魔兽系统相关窗体: 登录窗体(frmLogin) 注册窗体(frmRegister) 主窗体 (frmMain) 实现魔兽登录系统: 登录的界面如下 实现思路: 1.创建一个 ...
- u3d_小游戏_拼图_1_生成碎片(非随机)
http://blog.csdn.net/cube454517408/article/details/7907247 首先是参考此文: main.cs作用:1.大图的拆分 2.判断是否成功 3.对碎 ...
- 技术专题-PHP代码审计
作者:坏蛋链接:https://zhuanlan.zhihu.com/p/24472674来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 一.前言 php代码审计如字面 ...
- appid账号创建及A D-U-M-S码创建
APPID 企业账号创建流程及A D-U-N-S® Number 码创建(需要等2到3周时间,可以先创建成个人账号然后升级成公司账号) 021 26107504 邓白氏编码 1.需要VISI ...
- WIN7下强制分第四个主分区的方法
通过磁盘管理的界面方式, 第四个分区会被分成扩展分区, 建议通过命令行 打开命令行运行diskpart, list disk 会列出所有磁盘, 选择要操作的磁盘序号如1,select disk 1 如 ...
- C#开源系统大汇总
一.AOP框架 Encase 是C#编写开发的为.NET平台提供的AOP框架.Encase 独特的提供了把方面(aspects)部署到运行时代码,而其它AOP框架依赖配置文件的方式.这种部署方面(as ...
- Flex ActionScript版本的Map类型
ActionScript中没有Map类型,因为Object就相当于Map了.Object的属性相当于key,值相当于value. 也就是说,没有必要有Map类型.但是,这样做,也会带来一些问题,造成不 ...
- WP老杨解迷：可知评论系统还能勾搭用户呢
玩家可以忍受任何游戏内的磨难,但偏偏不能忍受游戏外的挫折,这个游戏外可不是因为系统原因怒摔手机的义举,更加不是线下见面互炫菊花转投阵营的冲动,有可能是登录的瞬间,那小小的提示,又出问题了,登录不上去, ...
- C#.NET 大型通用信息化系统集成快速开发平台 4.0 版本 - 组织机构的名称编号是否允许重复？
通常情况下,一个公司内部的部门名称,编号是不可能重复的.但是是在多公司的情况下,很可能有部门名称重复的问题存在,这时需要允许部门名称重复. 例如一个大型IT公司,在2个地区都有研发部或者客户服务部,这 ...
- EntityFramework 启用迁移 Enable-Migrations 报异常 "No context type was found in the assembly"
转自:http://www.cnblogs.com/stevenhqq/archive/2013/04/18/3028350.html 以前做项目的时候,没有采用分类库的形式,所以迁移一致非常顺利,没 ...