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

时间：2015-02-04 21:40:14 阅读：290 评论：0 收藏：0 [点我收藏+]

标签：

　　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

标签：

原文地址：http://www.cnblogs.com/diligenceday/p/4273220.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行