这段代码什么意思：

@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. java变量的初始化

    public class Init { private int age;//非静态初始化语句<3> private static String name; //静态初始化语句,先初始化静态 ...

  2. Android http超时选项的测试

    Android通过HttpConnectionParams类为http参数设置提供了两个超时的设置选项,分别是setSoTimeout和setConnectionTimeout.初看一眼Android ...

  3. Python的高级特性8:你真的了解类,对象,实例,方法吗

    Python的高级特性1-7系列是本人从Python2过渡3时写下的一些个人见解(不敢说一定对),接下来的系列主要会以类级为主. 类,对象,实例,方法是几个面向对象的几个基本概念,其实我觉得很多人并不 ...

  4. Web安全测试之跨站请求伪造（CSRF）篇

    跨站请求伪造(即CSRF)被Web安全界称为诸多漏洞中“沉睡的巨人”,其威胁程度由此“美誉”便可见一斑.本文将简单介绍该漏洞,并详细说明造成这种漏洞的原因所在,以及针对该漏洞的黑盒测试与灰盒子测试具体 ...

  5. Linux收集

    1.rsync快速删除文件 rsync --delete -avH /empty /rmdir 选项说明: –delete-before 接收者在传输之前进行删除操作 –progress 在传输时显示 ...

  6. PAT 1004. 成绩排名 (20) JAVA

    读入n名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. 输入格式:每个测试输入包含1个测试用例,格式为 第1行:正整数n 第2行:第1个学生的姓名 学号 成绩 第3行:第2个学生 ...

  7. C#中excel导入sql

    using Microsoft.Office.Interop.Excel; public int ledinExcel(string file, object sender, EventArgs e) ...

  8. DEDECMS之六 网站地图、RSS地图

    在用织梦CMS做网站的都知道,在它的robots.txt是屏蔽掉了data目录的,可是,不巧dedecms默认的网站地图是在data下的,为了让蜘蛛更好的爬行,有必要将dedecms生成的网站地图放在 ...

  9. PHPExcel

    1.PHPExcel类中读取Excel文件相关函数和使用方法 插件官网:http://phpexcel.codeplex.com/ <?php require_once 'Classes/PHP ...

  10. Div和Span标签显示与隐藏

    本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...