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布局的元素中添加一个元素样式为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="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的资料，打开