大佬教程收集整理的这篇文章主要介绍了谷歌浏览器49关于css样式杂谈，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
谷歌浏览器49.0.2623.112(XP系统下的最后一个版本)，代号就为Google49吧，与谷歌浏览器91.0.4472.114，代号就为Google91吧。主要就是项目上用到了flex布局，然后高度100%设定发现有不一样的体现。
先贴上一段代码，
<!DOCTYPE html> <html lang=en> <head> <@H_165_14@meta charset=utf-8> <@H_165_14@meta http-equiv=X-UA-Compatible content="IE=edge"> <@H_165_14@meta name=renderer content=webkit> <@H_165_14@meta name=viewport content="width=device-width,initial-scale=1"> <link rel=icon href=favicon.ico> <title>TEST</title> <body> <div id=app> <div class="box_buttons">11111</div> <div class="box_show"> <div class="box_test1"> </div> </div> </div> </body> </html> <style> body{ margin:0; padding:0; width:100vw; height:100vh; BACkground:gray; } #app{ position:relative; width:100%; height:100%; display:flex; display:-webkit-flex; flex-direction:column; BACkground:red; } .box_buttons{ position:relative; padding:16px; box-sizing:border-box; } .box_show{ position:relative; width:100%; flex:1; BACkground:red; } .box_test1{ position:relative; width:100%; height:100%; border:10px solid gray; box-sizing:border-box; BACkground:blue; } </style>
1. css的height:100%是继承于父元素的高度，如上代码中，#app继承了body设定的高度，如果去掉.box_show和.box_test1的样式，我们可以发现在Google49和Google91下的表现是一致的，不存在任何差异；
2.在上面代码中，用到了flex布局，其中box_show是自动填充满div#app的剩余高度的。那么.box_test1的height:100%，按理来说应该是继承div.box_show的高度的，会撑满.box_show。实际表现中却存在差异性，Google91(图2)和设想是一致的，但是Google49（图1）却没有撑开。
（图1）
@H_674_445@
（图2）
3.当把.box_test1的定位设置为position:absolute;两者的表现又是一致。
WHY???
猜测导致该问题的原因是浏览器两个版本对于flex:1的计算有差异，可能在Google49中只识别父元素定的height样式。查阅了很多资料，也没有提到相关信息，望各位大佬指点迷津。
以上是大佬教程为你收集整理的谷歌浏览器49关于css样式杂谈全部内容，希望文章能够帮你解决谷歌浏览器49关于css样式杂谈所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。