chrome 26.0.XXX版本下media query流媒体查询有问题的bug

mac2022-06-30 89

　　这段代码什么意思：

@media only screen and (max-width: 1360px)

　当用户的界面小于等于1360px的时候，会加载该流媒体样式（此时的界面是包含滚动条的）；

　　在Chrome/26.0.1384.0 Safari/537.26或者更低版本中会有一个神奇的bug；

　　出现bug的必须条件为，1：界面有引用一个css文件，不管这个css文件是否存在； 2：流媒体查询的宽度必须介于 --》》浏览器包含滚动条的可视区域和浏览器未包含滚动条的宽度之间，

　　3：界面必须出现滚动条，源码如下：

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/xx.css"/> <title>云平台首页</title> </head> <style> .bodyer { background:#FBA733; border:1px solid #eee; width:400px; height:400px; } /*@media all and (max-width:1300px) {*/ @media only screen and (max-width: 1360px){ .bodyer { width:200px; height:200px; } } </style> <body> <style> </style> <div class="bodyer"> </div> 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </body> </html> View Code

　　正常显示是要这样的：

　　有时候会变成这样：

　　新版本的chrome是没有问题的，至于哪些chrome有问题，我可没测过，要解决这个问题，把垂直滚动条去掉就好了，或者把滚动条出现在DIV内部，不要出现在BODY元素上，流媒体查询就会生效了；

转载于:https://www.cnblogs.com/diligenceday/p/4914568.html

最新回复(0)