html - CSS 不会在 IE8 上加载

标签 html css internet-explorer-8

我正在开发网站。除了没有一个 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;
}

最佳答案

IE 8 及以下版本仅响应 media 属性中的 screenprint

改变这个:

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

关于html - CSS 不会在 IE8 上加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17599868/

相关文章:

javascript - 使用 javascript 为输入元素设置动态不同的 id 属性

javascript - jQuery 不工作

javascript - <ul> 导航栏中的 JS/CSS 下拉菜单

html - 带有 clipPath 的 div 的单击事件在 angular.js 中不起作用

javascript - 水平鼠标滚轮滚动与 Map JQuery 冲突

css - 页脚仅在 IE 中出现在页面中间

internet-explorer - 如何禁用 IE 中的兼容性 View

html - CSS 表格高度在 IE8 中溢出容器 div

php - AJAX 不调用 PHP 文件

CSS3 动画不适用于 Opera 和 Firefox,但适用于 Chrome 和 Safari