提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

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

BUGChrome 查询 版本 Query xxx 流媒体 Media
2023-09-11 14:17:26 时间

　　

　　这段代码什么意思：

@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<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
</body>
</html>
View Code

 

 

 　　

　　正常显示是要这样的：

　　　　

 

　　有时候会变成这样：

　　

　　

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

相关文章