这段代码什么意思：

@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. 模版（template）

    模版(template) 在c++Template中很多地方都用到了typename与class这两个关键字,而且好像可以替换,是不是这两个关键字完全一样呢? 相信学习C++的人对class这个关键字 ...

  2. wamp5设置外网访问方法

    1.安装完Wamp5之后,从外网访问网页时存在无法访问问题. 2.phpmyadmin外网没法访问 1.解决办法: 打开wamp的托盘图标(右下角),找到"Config files" ...

  3. Guava中Predicate的常见用法

    Guava中Predicate的常见用法 1.  Predicate基本用法 guava提供了许多利用Functions和Predicates来操作Collections的工具,一般在 Iterabl ...

  4. matrix-tree

    学一发matrix-tree 原来bzoj1016这题是暴搜+玄学并查集过的-数据弱怪我咯 首先matrix-tree需要度数矩阵D,就是说当i=j时D[i][j]为i的度数,否则为0. 还有邻接矩阵 ...

  5. js中三个对数组操作的函数 indexOf()方法 filter筛选 forEach遍历 map遍历

     indexOf()方法  indexOf()方法返回在该数组中第一个找到的元素位置,如果它不存在则返回-1. 不使用indexOf时 var arr = ['apple','orange','pea ...

  6. nginx架构

    nginx平台初探(100%)  

  7. The specified framework 'Microsoft.NETCore.App', version '1.0.1' was not found 解决办法

    环境:Centos 7 已经下载安装.NET Core 1.1 Microsoft .NET Core Shared Framework Host Version : Build : 928f77c4 ...

  8. 安装包制作工具 SetupFactory使用1 详解

    2014-11-19 Setup Factory 是一个强大的安装程序制作工具.提供了安装制作向导界面,即使你对安装制作不了解,也可以生成专业性质的安装程序.可建立快捷方式,也可直接在 Windows ...

  9. QTableView 一列添加两个按钮

    在QTableView的一列里添加两个按钮,之前添加一个按钮的思路是一样的,只是计算了一下按钮的宽,放两个按钮而已. 添加一个按钮的例子:QTableView 添加按钮 本例源代码:QtTowButt ...

  10. 浅谈WCF的三种通信模式：请求响应模式、数据报模式和双工通讯模式

    一: WCF的服务端与客户端在通信时有三种模式:请求响应模式.数据报模式和双工通讯模式. 说一下基本知识,  1.如果想要将当前接口作为wcf服务器,则一定要加上[ServiceContract] 契 ...