在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的资料，打开

转载于:https://www.cnblogs.com/diligenceday/p/4273220.html

在chrome下-webkit-box布局的一个bug相关推荐

前端面试CSS自检（下）页面布局、定位与浮动和场景应用（先看问题自己自述一遍不会再看答案）
推荐大家的使用本篇文章的方式: 先看问题自己会不会,如果会的话,要自己说一遍,组织好语言. CSS的面试内容主要可以分四个部分: CSS基础.页面布局.定位与浮动和场景应用 CSS部分会涉及到代码的编 ...
html中的box布局,CSS3 Flexbox 布局完全指南(图解 Flexbox 布局详细教程)
背景 Flexbox 布局(也叫Flex布局,弹性盒子布局)模块( W3C 候选推荐,截止到2017年10月)旨在提供一个更有效地布局.对齐方式,并且能够使容器中的子元素大小未知或动态变化情况下仍然能 ...
Winform中将WebBrower浏览器控件由IE内核修改为Chrome的WebKit内核
场景 Winform中自带一个浏览器控件WebBrower控件,使用此控件可以很轻易的实现一个桌面端的浏览器. 新建Winform程序,然后在设计页面在工具箱中拖拽一个WebBrower控件. 然后 ...
Java基础篇：为Box类添加一个方法
尽管创建一个仅包含数据的类是相当不错的事情,但这样的情况很少发生.大部分情况是你将使用方法存取由类定义的实例变量. 事实上,方法定义大多数类的接口.这允许类实现函数可以把内部数据结构的特定布局隐蔽到方 ...
CSS+JavaScript下拉菜单布局与代码执行
导读:今天来通过一个安居客web下拉菜单来总结一下怎么用css布局以及通过js切换css效果头部的布局以及下拉菜单布局实现代码: <html> <body><div ...
从上往下流式布局_教大家怎么写前端布局
一.静态布局(Static Layout) 1. 布局概念最传统.原始的Web布局设计.网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow: ...
分享在winform下实现左右布局多窗口界面
在web页面上我们可以通过frameset,iframe嵌套框架很容易实现各种导航+内容的布局界面,而在winform.WPF中实现其实也很容易,我这里就分享一个:在winform下实现左右布局多窗口 ...
wxpython嵌套panel布局的一个问题
最近在学习使用wxpython,想通过panel来分出不同的区块来进行单独布局却发现,当我在panel中嵌套了一个panel,在这个嵌套的panel中使用boxsizer进行布局没有效果代码如下: ...
chrome下的img.onload
今天发现chrome下的一个小问题,当img.src重复设置为相同值的时候,img.onload不会重复执行. <img src=""><button>cl ...

在chrome下-webkit-box布局的一个bug

在chrome下-webkit-box布局的一个bug相关推荐

最新文章

热门文章