Question

我创建了一个使用HTML 5的网站，其分辨率标签适用于大中型布局。在测试我的网站时，我发现它适用于IE9，chrome，firefox，safari但不适用于IE8及更早版本。我使用的CSS链接如下;

<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' />

目前在打开网站时，它没有div或样式，因此我认为它与链接到CSS样式表有关。我在html中使用了div标签;

示例：

<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>

我不是专家，任何信息都会非常有用。

编辑：

我尝试过使用：

<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>

使用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());
  });
});

网页现在只看到样式表？这段代码有问题吗？

Answer 1

您在链接代码的媒体属性CSS3 media queries中使用了they are not supported by IE8 and older versions。这就是为什么样式表在IE8及更早版本中没有加载的原因。

修改

如下面的the answer by Colin Bacon所述，您可以使用Respond.js让事情适合您。我只是在这里添加它，因为您似乎忽略了上述选项。您需要做的就是在链接标记之前的head部分添加以下行（将src属性值替换为subject.js托管副本的路径）：

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

从IE6到IE8，事情将开始为你工作，这是迄今为止最容易解决问题的方法。

Answer 2

如其他答案所述，IE8及以下版本不支持CSS3媒体查询。如果您需要它们，您可以使用Scott Jehl的这种填充物。

Respond.js

Answer 3

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

检查此支持矩阵：

http://caniuse.com/css-mediaqueries

Answer 4

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

e.g。

<!--[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]-->

HTML 5 - HTML在IE7 / IE8中看不到CSS？

4 个答案: