css - 使这个 CSS 在 IE8 中工作

Question

我无法在 IE8 中完成一些样式设置。该元素最初不支持 AS 跨浏览器以返回到 IE8，但现在必须支持，因此我正在尝试对该网站上的此 CSS 进行必要的更改。

这是网站的第一个页面部分，主页部分位于顶部，带有 Logo 和注册框。此部分的 CSS 如下所示:

#page-div-home{
    height:auto;
    background:url('../img/_Pics/bg.png') 50% 40%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: fixed;

    .logo{
        width:100%;
        max-width:1000px;
        height:300px;
        margin-top:100px;
        display:inline-block;

        background:url('../img/_Logos/eSchoolLogo.png');
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: fixed;
    }

}

它还有两个半页宽部分的媒体查询，如下所示:

.sub-wrap{
width:100%;
max-width:1500px;
display:inline-block;
text-align:center;

@media screen and (max-width: 1340px){
    width:90%;
}

.sub-half{ //for FAQ section
    width:50%;
    height:auto;
    float:left;
    text-align:left; //a fix for the .sub-wrap text-align:center, all the FA
    padding:10px;

    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;

    @media screen and (max-width: 1340px){
        display:block;
        float:none;
        width:1000px;
        margin:0 auto;

        ul{
            padding:0;//this allows the <li>, when they are stacked, to take up full width of ul
        }
    }//media query(1340)

    @media screen and (max-width: 1125px){
        width:700px;
    }//media query(1125)

    @media screen and (max-width: 810px){
        width:100%;
    }

}//.sub-half

我不确定在所有使用的属性中到底是什么导致 IE8 错误地呈现页面(我想它根据其标准正确呈现它)但我想学习如何修复这些问题错误的。我还有一个 <header>和 <nav>在顶部菜单中使用的标记是 position:fixed;永远不要在滚动条上移动。无论如何，我们将不胜感激。

Answer 1

您可以尝试将以下内容添加到 HTML 代码中的 head 部分:

<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->