Not work on IE8 - Githubissues

GoogleCodeExporter commented 9 years ago

What steps will reproduce the problem?
1. Not work on IE8
2.
3.

What is the expected output? What do you see instead?
I set two viewport, 1366 and 1024. But there only 1366 on ie 8.

What version of the product are you using? On what operating system?
IE 8. XP

Please provide any additional information below.

Original issue reported on code.google.com by sweetdon...@gmail.com on 26 Nov 2013 at 3:43

GoogleCodeExporter commented 9 years ago

[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="test1.css" rel="stylesheet" type="text/css" />
 <!--[if lt IE 9]>
<script 
src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->

<style>
body{background:lightblue;}

</style>

</head>

<body>
<div id="wrapper">
<div id="ttt1">

</div>
<div id="t1">
<center><img src="product11.jpg" width="960" height="500"  /> </center>
</div>
</div>
</body>
</html>

[css]test1.css
@charset "UTF-8";
/* CSS Document */

* { margin: 0; padding: 0; }
html { }
body { background:#ffffff; font-size: 13px; color: #666666; font-family: Arial, 
helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}  
a, img {  border:none; color: #000;  text-transform: uppercase;}
p { margin: 0 0 10px; line-height: 1.4em; }
img { }
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display: block;
    }

body{

    font-size:12px;
    color:#666666;
    letter-spacing:1px;
    line-height:24px;

}
body  a,a:visited{
    text-decoration:none;
    color:#666666;
}
body  a:hover{
    text-decoration:none;
    color:#FEC20D;
}
#wrapper{
/*  margin:0 auto;
    width:360px;
    height:auto;*/
    height:auto;
    width: 100%;    
    max-width: 1355px;
    margin: auto;
    background:blue;
}

#ttt1{background:url(product11.jpg) no-repeat center 
top;width:auto;height:791px;display:block;}
#t1{display:none;}

@media screen and (max-width: 1024px) {
    @charset "UTF-8";

    body{

    font-size:0.7em;
    color:#666666;
    letter-spacing:1px;
    line-height:24px;

    }
    #wrapper{
/*  margin:0 auto;
    width:360px;
    height:auto;*/
    height:auto;
    width: 100%;    
    margin: auto;
    background:red
}
    #ttt1{display:none;}
    #t1{display:block;}

}

Original comment by sweetdon...@gmail.com on 26 Nov 2013 at 3:49

GoogleCodeExporter commented 9 years ago

Back from the dead... There is a new version of the script. It has some CSS 
parsing and processing improvements. If you're still using it, or would like to 
try again, could you confirm that this issue is solved or not?

Original comment by wou...@dynora.nl on 4 Apr 2014 at 11:46

bright-spark / css3-mediaqueries-js

Not work on IE8 #41