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

  

  这段代码什么意思:

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

  

  正常显示是要这样的:

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

  有时候会变成这样:

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

  

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

上一篇:javascript – 在鼠标移动中创建涂抹/液化效果,使用webgl连续动画回原始状态


下一篇:idhttp.post方式 调用datasnap rest 远程方法