Question

我正在开发一个网站。虽然没有一个css可以在IE8上运行，但它还是很顺利。我一直在网上阅读，并且在解决提供解决方案的各种指南和黑客方面遇到了一些麻烦。关于如何开始工作的任何建议？下面是一段代码来帮忙。谢谢！

<!DOCTYPE html>
<html>
<head style="overflow-x: hidden">
    <script src="//cdn.optimizely.com/js/272026200.js"></script>
    <meta name="viewport" content="width=device-width">
    <!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css">
    <![endif]-->
    <title>Dupont Studios</title>
    <link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>

    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="waypoints.js"></script>


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
    <link rel="stylesheet" media="only screen and (min-width: 401px)" href="style.css" />

    <script language="javascript" type="text/javascript">
        $(function() {
        // Do our DOM lookups beforehand
        var nav_container = $(".nav-container");
        var nav = $("nav");
        nav_container.waypoint({
        handler: function(direction) {
        nav_container.toggleClass('sticky', direction=='down');

        }
        });
        $("li.nav-item").click(function() {
        $("html, body").animate({
        scrollTop: $($(this).children().attr("href")).offset().top + "px"}, {duration: 500, easing: "swing"
        });
        return false;
        });

        });

    </script>



</head>

更多信息： ie8.css表只是我作为测试所做的style.css的一个副本。我在网上找到了一个结尾的东西\ 9可能有所帮助。这是代码的片段。回想起来，这似乎相当愚蠢

body{
    font-family: 'Helvetica Neue', 'Helvetica Neue Light', sans-serif\9;
    margin:0\9;

}

#top-container{
    width:100%\9;
    height:100%\9;
}

#top-content{
    max-width:1200px\9;
    margin-right:auto\9;
    margin-left:auto\9;
}

#top-img{
    width:100%\9;
    padding-bottom: 10%\9;
}

Answer 1

IE 8及以下版仅响应screen属性中的print和media。

改变这个：

<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />

到此：

<link rel="stylesheet" media="screen" href="mobile.css" />

在CSS文件中添加媒体查询：

@media screen and (max-width: 400px) {
  body { 
    ...
  }
  ..
}

正如其他人所说，

Respond.js应该有助于兼容性。

Answer 2

IE8（或者，具体来说，IE9之前的任何IE版本）并不完全支持CSS3媒体查询，这就是你的mobile.css和style.css样式表没有加载的原因。

以下是some suggestions (such as using a JS library like Respond.js) for how to keep IE8 users happy。

Answer 3

如果您需要在IE8上运行CSS3媒体查询，则应使用respondjs：

快速＆amp;轻量级填充，用于最小/最大宽度CSS3媒体查询（适用于IE 6-8等）

Answer 4

另一个建议 - 我首先加载我的默认样式表，然后声明条件IE样式表。我们的想法是使用该条件样式表来覆盖默认样式表中的某些内容，因此您不必在任何地方放置！important声明。因此'级联'

Answer 5

如果只是ie8样式表没有加载，请注意，如果IE在兼容性视图中运行，它将自己标识为IE7。因此，您的条件注释将不适用，并且永远不会包含ie8.css样式表。

CSS不会加载IE8

5 个答案: