1

我正在开发一个网站。它的进展很好，除了没有一个 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;
}
4

5 回答 5

2

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 应该有助于兼容性。

于 2013-07-11T18:12:19.320 回答
1

IE8（或者，特别是 IE9 之前的任何 IE 版本）不完全支持 CSS3 媒体查询，这就是您的 mobile.css 和 style.css 样式表无法加载的原因。

下面是一些关于如何让 IE8 用户满意的建议（例如使用像 Respond.js 这样的 JS 库）。

于 2013-07-11T17:39:07.377 回答
0

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

于 2015-01-26T17:40:36.470 回答
0

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

用于最小/最大宽度 CSS3 媒体查询的快速轻量级 polyfill（适用于 IE 6-8 等）

于 2013-07-11T17:42:09.400 回答
-1

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

于 2013-07-11T17:42:18.427 回答