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

最新推荐文章于 2023-05-08 23:46:33 发布
最新推荐文章于 2023-05-08 23:46:33 发布
阅读量101 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35771144/article/details/105782334
版权

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

　　

　　

weixin_35771144
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【解决方案】display: box; 盒子布局无效的问题
Kuroko's Development Notes
07-24 1167
例子如下css： .find_nav_list ul { display: -moz-box; display: -webkit-box; display: box;  } .find_nav_list ul li {display: block;  -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1;  }   PS：注意此处盒子模型虽然是...
HTML + CSS 宝典 第七节 浏览器兼容性
唐僧的专栏
03-19 363
浏览器兼容性 兼容性问题产生的原因： 市场竞争， 官方(W3C）标准制定 延后了, 各个浏览器 厂家 自行 添加新的属性，造成了市场混乱； 标准版本的变化， 官方的标准也会发生变化， 厂商前缀 ： 还未成为 W3C 标准 或者标准还在讨论...
display:-webkit-box布局
weixin_52255957的博客
05-08 3382
webkit-box-pack:是让子元素在水平方向上的对其方式，跟flex布局中的justify-content属性差不多。父元素500px - 150px(child-three )=350px,子元素1和2就各占350px的1/3和2/3。以上就是我目前对-webkit-box的一个初步了解，希望能帮到你，如果有什么错误的地方请在评论区指正~~-webkit-box-align:子元素在垂直方向的对齐方式，跟flex中的align-items差不多。:默认值，子元素横向排序。
自适应布局-webkit-box布局实现文字内容过长自动换行，超出规定行数部分省略号隐藏
小绵杨
09-13 2083
当文字内容超出div的规定宽度时，最好的解决办法是进行换行处理。当换行达到一定的行数时，我们就可以通过省略号来进行隐藏处理，达到显示大致内容的目的。这也是我在写博客系统时遇到的一个问题，在博客列表不需要将博客的内容全部展示出来，只需要展示前几句话即可。所以使用-webkit-box布局来实现。 html部分： <div class="blog"> <div class="article"> 文本显示为两行,超过部分隐藏并使用省略号 修改 width 属性查看效果
css3 display:box
li_shanshan_ok的专栏
03-30 664
display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-web
CSS3 Notes: -webkit-box-reflect实现倒影的实例
01-21
在使用webkit内核的浏览器中(chrome,safari,移动端浏览器)，可以使用-webkit-box-reflect属性来实现倒影，语法如下所示 [ above | below | right | left ]? <length>? <image>? 该值包涵了三部分：方位+偏移量+遮罩...
remotedebug-ios-webkit-adapter：使用VS Code和Chrome DevTools等工具在iOS上调试Safari和WebView
02-03
新闻：现在， ： //inspect.dev/取代了RemoteDebug –一个用于macOS和Windows的新开发人员工具，可以在Safari和iOS设备上的WebViews中检查和调试Web应用程序和网站。 :exploding_head: :party_popper: :fire: Remote...
chrome-extension-cli：next下一个Chrome扩展程序的CLI
01-29
Chrome扩展程序CLI 下一个Chrome扩展程序的CLI。 :rocket:快速概述npm install -g chrome-extension-clichrome-extension-cli my-extensioncd my-extensionnpm run watch 然后按照以下说明查看您的扩展程序： 打开...
chrome-ext-box：Chrome扩展存储盒
01-30
如果您的Chrome装了太多扩展，但日常用到也就其中其中一部分，而这里面又有一部分是使用频率很低的，不适合一直开启，但是少量之后，需要用到的时候找起来太麻烦并且用完再减少这一系列操作太繁琐，那么这个扩展可能...
chrome插件-190612.7z
01-31
chrome插件-190612.7z
css3中的display：-webkit-box的用法
热门推荐
csdn_chenli
10-27 7万+
css3中的display：-webkit-box的用法 webkit-box 1.之前要实现横列的web布局，通常就是float或者display:inline-block;但是都不能做到真正的流体布局。至少width要自己去算百分比。 2.flexiblebox就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。 3.box-flex是css3新添加的盒子模型
自适应布局webkit-box的用法
weixin_30258027的博客
12-01 1185
Flexible Box Model(灵活盒子模型)在平常的web横排布局中，会经常用到float或display:inline-block，但是在多种不同宽度的移动设备的自适应布局中用的话，还得设置百分比宽度和考虑清除浮动。而Flexible Box Model可以自动计算宽度和自适应，更加方便。 Flexible Box Model有几个属性：1、box-orient 在父元...
关于盒模型-webkit-box流式布局
jsonya的博客
01-23 1058
新的工作需要适配移动端，以往的float、block布局会非常麻烦且问题不断，所以尝试下-webkit-box布局。-webkit-box是css3新添加的盒子模型属性，有人称之为弹性盒模型，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分等分布方式以及如何处理可用的空间。使该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。但是它有一定的局限性，在
移动布局box||-webkit-box
小灯博客
04-19 593
移动布局，display:-webkit-box||dispaly:box; 父级： 水平|垂直排列-webkit-box-orient:horizontal|vertical 子级垂直对齐方式-webkit-box-align:center|start|end|stretch|baseline; 子级水平对齐方式-webkit-box-pack:start|end|
-webkit-box使用方法和示例
yhdyy123的博客
09-09 8887
-webkit-box用于移动动设备自适应布局，实现横列的流体布局 1、在需要实现流体布局的子元素的直接父元素中添加属性：display:-webkit-box; 2、需要对父元素按比例划分成块的，需要在子元素中添加属性：-webkit-box-flex:1; width:0; width:0; =>包含子元素自身的内容块长度来划分父元素，否则会除去子元素内容所占的长度，剩余空...
CSS3中webkit-box布局页面实例
一步一步,网上爬
03-12 1115
之前布局都是用float布局或者是display:inline-block;+width:**%；来计算，所以都不是真正意义上的流布局； 接下来的实例能完整的教给大家如何建立CSS3当中的流布局（以chrome为例） 三列自适应布局                  .wrap {   display: -we
WEBKIT BOX 实现水平垂直居中
ISaiSai的专栏
11-22 8396
display: -webkit-box;  使用flexbox 布局   -webkit-box-pack: center;  实现容器内容垂直居中   -webkit-box-align: center;  实现容器内的内容水平居中      -webkit-box-orient: vertical; 容器内的元素垂直排列    
-webkit-box
最新发布
09-01
你提到了一个CSS属性，-webkit-box。...需要注意的是，-webkit-box属性是一个私有属性，只在WebKit浏览器中有效，并且在新版浏览器中已经被弃用。推荐使用更标准的CSS Flexbox布局或CSS Grid布局来替代使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值