크롬에서 - 웹키트박스 레이아웃의 버그

83698 단어 chrome
크롬, 즉 웹키 엔드에서 검출한 것으로 크롬 버전은 40이다. - 웹키트-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>

 
 
웹키트박스의 레이아웃 요소 중 a링크를 클릭하면 이 링크의href는 ###이고 이 요소의 부급에 스크롤 바가 있으면 스크롤 바가 자동으로 맨 위로 굴러간다(정상적인 상황에서는 뛰지 않는다).
너무 싱겁게 말하면,
해결 방법은 웹키트박스 레이아웃의 요소에 요소 스타일을 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 표준에 부합되거나 비참하게 죽을 수 있으니 주의해야 한다.
장신욱의 웹키트 관련 자료를 배울 수 있습니다열다.
w3c의 자료, 열다
　　
12. Best Time to Buy and Sell Stock
C 와 C + + 의 void * 의 차이

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage