0

I have created a website using HTML 5 with resolution tags for a wide and medium layout. When testing my website I found that it works in IE9, chrome, firefox, safari but not IE8 and older. The CSS links I have used are below;

<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel='stylesheet' media='screen and (max-width: 900px)' href='medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='wide.css' />

Currently upon opening the website, it has no divs or styling therefore I believe it has something to do with linking to the CSS style sheets. I have used div tags within my html;

Example:

<div id ="container">
    <div id ="header">
        <div id = "logo">
            <img src="images/Logo.jpg" height = "180" width = "300" alt = "Oops!">
        </div>                
        <div id = "small-logo">
            <img src="images/SmallLogo.jpg" alt = "Oops!">
        </div>        
    </div>

I am not an expert and any information would be extremely helpful.

EDIT:

I have tried using: 

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script >
<script type='text/javascript' src='resolution-test.js'></script>

Using javascript:

function adjustStyle(width) {
  width = parseInt(width);
  if (width < 900) {
    $("#size-stylesheet").attr("href", "medium.css");
  } else {
    $("#size-stylesheet").attr("href", "wide.css"); 
  }
}

$(function() {
  adjustStyle($(this).width());
  $(window).resize(function() {
    adjustStyle($(this).width());
  });
});

The webpage is now only seeing the style sheet? Are there any problems with this code?

4

4 回答 4

3

您在链接标签的媒体属性中使用CSS3 媒体查询，IE8 和旧版本不支持它们。这就是样式表无法在 IE8 和更早版本中加载的原因。

编辑

正如下面Colin Bacon 的回答中提到的，您可以使用Respond.js让事情为您工作。我只是在这里添加它，因为您似乎忽略了提到的选项。您需要做的就是在链接标签之前的 head 部分中添加以下行（将src属性值替换为您托管的respond.js 副本的路径）：

<script src="/path/to/respond.proxy.js"></script>

从 IE6 到 IE8，一切都将开始为您工作，这是迄今为止解决您问题的最简单方法。

于 2013-05-09T10:30:50.873 回答
3

As stated by other answers, CSS3 media queries are not supported in IE8 and below. If you need them to work you can use this polyfill by Scott Jehl.

Respond.js

于 2013-05-09T10:38:53.133 回答
0

IE 9 之前的版本不支持媒体查询，但您可以使用 IE 条件注释来指定将在旧版本 IE 中加载的附加样式表：

例如

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="old-ie.css" />
<!--<![endif]-->

但是，您无法在这些注释中指定屏幕大小，但您可以使用一些 Javascript 来检测屏幕大小并加载正确的样式表（理想情况下，脚本将位于替代文件中），例如

<!--[if lt IE 9]>
<script type="text/javascript">
    if (screen.width< 901) { 
        document.write('<link href="medium.css" type="text/css" rel="stylesheet"/>');
    } else { 
        document.write('<link href="wide.css" type="text/css" rel="stylesheet"/>');
    }
</script>
<!--<![endif]-->
于 2013-05-09T10:37:39.243 回答
0

IE8 及更低版本不支持 CSS3 媒体查询。

检查此支持矩阵：

http://caniuse.com/css-mediaqueries

于 2013-05-09T10:32:10.520 回答