IE7,8,9 no lee correctamente la consulta de medios.
tengo estopágina que en realidad está bien en todos los navegadores, es decir, cuando se contrata el navegador, para mostrar la versión móvil del diseño, basada en@media Consulta la configuración de css, pero no en IE8, hasta donde puedo verificar. ¿Cómo me manejo este problema?
Aquí está todo el código por cierto:
<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>