文章出處

　　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的資料，打開

　　

　　


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄