chrome 26.0.XXX版本下media query流媒体查询有问题的bug
2024-10-19 06:21:52
这段代码什么意思:
@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是没有问题的, 至于哪些chrome有问题, 我可没测过, 要解决这个问题, 把垂直滚动条去掉就好了, 或者把滚动条出现在DIV内部, 不要出现在BODY元素上, 流媒体查询就会生效了;
最新文章
- Gulp真实项目用例
- HTML5入门以及新标签
- WIN7 + IIS7 Service Unavailable HTTP Error 503. The service is unavailable.
- Linux 信号详解一(signal函数)
- JPush极光推送Java服务器端API
- 第七章 springboot + retrofit
- html里文本保留换行格式
- OneProxy与其它数据库中间件的对比
- MD5加密方式
- Git教程(11)把本地的项目传到远程
- HDOJ(HDU) 2143 box(简单的多次判断-用的卫条件)
- 三种实现PHP伪静态页面的方法(转)
- SDP简要解析
- css基础(二)
- Inverse属性和cascade属性以及集合的多对多关系
- GB2312 编码
- css样式引入优先级?
- phpstudy中的mysql
- 第四章&#183; Redis的事务、锁及管理命令
- JavaWeb基础之Servlet简单实现用户登陆