这段代码什么意思：

@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元素上， 流媒体查询就会生效了；

chrome 26.0.XXX版本下media query流媒体查询有问题的bug的更多相关文章

  1. media query(媒体查询)和media type(媒体类型)

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

  2. 关于IE8下media query兼容的解决方案探讨

    在国内IE8至少还占有20%的市场份额,所以在做网站时,必须得为这部分用户特殊兼容考虑. 一方面IE8上面很多css3定义的标签不能使用,另外一方面javascript的addEventListene ...

  3. media query媒体查询

    媒体查询(CSS3 media query) 一.逻辑操作符:not.and.only not:not操作符用来对一条媒体查询的结果取反. and:and操作符用来把多个媒体属性组合起来,合并到同一条 ...

  4. CDH 6.0.1 版本 默认配置下 HUE | happybase 无法访问 Hbase 的问题

    第一个问题 HUE 无法直接连接到 HBase 在默认配置下 CDH 6.0.1 版本下的 HBase2.0 使用了默认配置 hbase.regionserver.thrift.compact = T ...

  5. media type与media query

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

  6. 利用media query让背景图适应不同分辨率的设备

    随着上网方式的多样化,用户选择上网的工具不再仅是PC,而可以是手机,或者平板电脑.随之而来的问题是如何让网页适应不同分辨率,这给前端工程师们带来了新的挑战,其中重要的一点是如何让图片能在不同的分辨率下 ...

  7. media type 与 media query

    参考博客:http://www.qianduan.net/media-type-and-media-query.html media type(媒体类型)是css 2中的一个非常有用的属性,通过med ...

  8. 媒体查询@media query

    @media query 媒体查询 @media (min-width:768px)小屏 (>=) @media (min-width:992px)中屏 @media (min-width:12 ...

  9. 【大数据】Linux下Storm（0.9版本以上）的环境配置和小Demo

    一.引言: 在storm发布到0.9.x以后,配置storm将会变得简单很多,也就是只需要配置zookeeper和storm即可,而不再需要配置zeromq和jzmq,由于网上面的storm配置绝大部 ...

随机推荐

  1. 三维网格细分算法（Catmull-Clark subdivision & Loop subdivision）附源码

    下图描述了细分的基本思想,每次细分都是在每条边上插入一个新的顶点,可以看到随着细分次数的增加,折线逐渐变成一条光滑的曲线.曲面细分需要有几何规则和拓扑规则,几何规则用于计算新顶点的位置,拓扑规则用于确 ...

  2. 第四章 Hibernate入门

    1.构建了一个Student实体类 public class Student { private Integer id; //name private String name; //age priva ...

  3. AC日记——基因相关性 openjudge 1.7 03

    03:基因相关性 总时间限制:  1000ms 内存限制:   65536kB 描述 为了获知基因序列在功能和结构上的相似性,经常需要将几条不同序列的DNA进行比对,以判断该比对的DNA是否具有相关性 ...

  4. 经典DOS游戏皇帝攻略(曾经的回忆)

    最完美攻略>>>>> -------------------------------------------------------------------------- ...

  5. Unity(64bit)5.1 打开无故出现框框，纹理不见了

    Unity(64bit)5.1打开无故出现框框,纹理不见了 原来是脚本有误影响了,U3D编辑器打开那一刹那出错

  6. noj[1581] 筷子

    题目描述 A先生有很多双筷子.确切的说应该是很多根,因为筷子的长度不一,很难判断出哪两根是一双的.这天,A先生家里来了K个客人,A先生留下他们吃晚饭.加上A先生,A夫人和他们的孩子小A,共K+3个人. ...

  7. Kali linux渗透测试常用工具汇总1

    1.ProxyChains 简介:代理工具.支持HTTP/SOCKS4/SOCK5的代理服务器,允许TCP/DNS通过代理隧道. 应用场景:通过代理服务器上网. 配置:/etc/proxychains ...

  8. javascript实现优先队列

    1.概念 一般情况下从队列中删除元素,都是率先入队的元素.但是有些使用队列的情况不遵循先进先出的原则,这就是插队,这需要使用优选队列的数据结构来进行描述. 从优先队列中删除元素的时候,需要考虑优先级的 ...

  9. 用Javascript判断访问来源操作系统, 设备, 浏览器类型

    var browser = { os : function() { var u = navigator.userAgent; return {// 操作系统 linux: !!u.match(/\(X ...

  10. DataReader用法

    一.DataReader含义 DataReader相比于DataSet,DataReader是一个抽象类,所以不能用DataReader DR = new DataReader(),来构造函数创建对象 ...