这段代码什么意思：

@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. AC日记——找最大数序列 openjudge 1.9 10

    10:找最大数序列 总时间限制:  1000ms 内存限制:  65536kB 描述 输入n行,每行不超过100个无符号整数,无符号数不超过4位.请输出最大整数以及最大整数所在的行号(行号从1开始). ...

  2. C#中Abstract和Virtual

    C#中Abstract和Virtual 在C#的学习中,容易混淆virtual方法和abstract方法的使用,现在来讨论一下二者的区别.二者都牵涉到在派生类中与override的配合使用. 一.Vi ...

  3. Java MyEclipse下Ant build.xml简单实例详解

    一.下载配置ant 1.首先下载ant: http://www.apache.org/ 下载最新的版本2.解压ant 后设置ANT_HOME, PATH中添加ANT_HOME目录下的bin目录(如:A ...

  4. Linux混杂设备驱动学习

    Linux混杂设备是字符设备的一类,主要是混杂设备拥有相同的主设备号(10),但是次设备号是不同的.所有的混杂设备行程一个链表,对设备访问时内核更据次设备号查找到相应的混杂设备. 混杂设备用struc ...

  5. [No00003E]26个字母暗藏的单词秘密

    个字母暗藏的单词秘密 人们普通认为:英语是拼音文字,因而与象形无关.但是,实际上,即使作为拼音文字,其字母的来源也与象形有关.根据笔者十多年的研究结果,英语中的二十六个字母每个字母都有其象形意义,而且 ...

  6. Y2161 Hibernate第三次考试 2016年8月18日 试卷分析

  7. uva146 ID codes

    Description It is 2084 and the year of Big Brother has finally arrived, albeit a century late. In or ...

  8. P1047 校门外的树

    P1047 校门外的树 题目描述 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0 ...

  9. Java集合系列：-----------06List的总结（LinkedList，ArrayList等使用场景和性能分析）

    现在,我们再回头看看总结一下List.内容包括:第1部分 List概括第2部分 List使用场景第3部分 LinkedList和ArrayList性能差异分析第4部分 Vector和ArrayList ...

  10. 上传Text文档并转换为PDF

    今天在ASP.NET MVC环境中学习一些PDF相关的知识,想法是上传文件成功时,并把文件转换为PDF文档. 打开你的专案,运行NuGet包管理器,下载一个叫iTextSharp的东东: 点击Inst ...