IE7,8,9没有正确读取媒体查询。 [英] IE7,8,9 not reading media query properly.

查看:95
本文介绍了IE7,8,9没有正确读取媒体查询。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有这个 网页 ,它实际上在所有浏览器,意思..当浏览器是约定的,显示移动版本的布局,基于 @media 查询css设置,但不是在IE8,到我可以检查。如何解决这个问题。

I have this page which is actually rendered fine in all browsers, meaning.. when browser is contracted, to show mobile version of the layout, based on @media query css settings, but not in IE8, as far as I can check. How do I get around of this problem.

以下是所有代码btw:

Here is all the code btw:

<html>
<head><style>
body{margin:0px; padding:0px;}
#a{height:150px; background-color:#ffffff; border-bottom:1px solid #CCC;}
#x{min-height:350px; margin-top: 10px; background-color:#CCC;}
#y{min-height:30px; margin-top: 10px; background-color:#CCC;}


@media all and (min-width:700px){

#b{width:100%;  min-height:400px;}
    #sep {
  margin: auto;
  overflow: hidden;
  width: 960px;
}
    #x{width:65%; float:left;}
    #y{width:32%; float:right; }
#c{background-color:#656565; height:80px;}
.for-mob{display:none;}
.for-desc{background-color:green;}
}
@media all and (max-width:700px){
.for-mob{background-color:green;}
.for-desc{display:none;}
#b{width:100%; min-height:400px; }
#x{width:100%; display:block; }
#y{width:100%; display:block; }
#c{background-color:#656565; height:100px;}

}
</style></head>
<body>

<div id='a'> <h1>I am header </h1>
</div> 

<div id='b'>
<div id='sep'>

    <div id='x'>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    </div>
    <div id='y'>
    <h1>I am sidebar </h1>
    </div>
</div> 
</div> 
<div class='for-desc'><h1>If you shrink the browser, I become invisible</h1> </div>
<div class='for-mob'><h1>If you maximize the browser, I become invisible</h1></div>

<div id='c'>
<h1> I am a simple footer </h1>
</div> 
</body>


推荐答案

Response.js只创建元素规则,媒体查询使用
https://code.google.com/p/ css3-mediaqueries-js /

Response.js only creates rules on elements, to emulate the media query use https://code.google.com/p/css3-mediaqueries-js/

最好只为IE< 9包含一个特定的css,但这取决于你:)

It would be better to include a specific css only for IE<9 but it is up to you :)

这篇关于IE7,8,9没有正确读取媒体查询。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆