首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >CSS无法在IE8上加载

CSS无法在IE8上加载
EN

Stack Overflow用户
提问于 2013-07-12 01:34:20
回答 5查看 2.7K关注 0票数 1

我在开发一个网站的过程中。除了没有一个css能在IE8上工作这一事实,它进展得很好。我一直在网上阅读,在理解各种提供解决方案的指南和技巧时遇到了一些麻烦。有什么建议可以让它开始工作吗?这里有一段代码来帮助你。谢谢!

代码语言:javascript
复制
<!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结尾的东西可能会有帮助。下面是代码的一小段。回想起来,这似乎很愚蠢。

代码语言:javascript
复制
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;
}
EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2013-07-12 02:12:19

IE 8及更低版本仅响应media属性中的screenprint

更改此设置:

代码语言:javascript
复制
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />

要这样做:

代码语言:javascript
复制
<link rel="stylesheet" media="screen" href="mobile.css" />

并在CSS文件中添加媒体查询:

代码语言:javascript
复制
@media screen and (max-width: 400px) {
  body { 
    ...
  }
  ..
}

正如其他人所指出的,Respond.js应该有助于提高兼容性。

票数 2
EN

Stack Overflow用户

发布于 2013-07-12 01:39:07

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

票数 1
EN

Stack Overflow用户

发布于 2013-07-12 01:42:09

如果需要在IE8上运行CSS3介质查询,则应使用respondjs

用于最小/最大宽度CSS3媒体查询的快速轻量级polyfill (适用于IE 6-8及更多)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17599868

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档