html - css 导航栏菜单在旧 ie 中不起作用

Question

我的导航栏在 IE 8 或更早版本中不显示。我已经搜索过，但不明白有什么问题。在 chrome 和其他浏览器中它工作正常 - 但在旧的 IE 中，它只是全白，直到鼠标悬停在选项卡上方，然后它显示。

我的网站是 www.broes.dk

我的 CSS 是:

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* Basic Styles */
html {
overflow-y: scroll;
}

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background-color: #ffffff;
}

nav {
    height: 40px;
    width: 100%;
background-image: linear-gradient(bottom, rgb(0,114,167) 0%, rgb(103,176,207) 100%);
background-image: -o-linear-gradient(bottom, rgb(0,114,167) 0%, rgb(103,176,207) 100%);
background-image: -moz-linear-gradient(bottom, rgb(0,114,167) 0%, rgb(103,176,207) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(0,114,167) 0%, rgb(103,176,207) 100%);
background-image: -ms-linear-gradient(bottom, rgb(0,114,167) 0%, rgb(103,176,207) 100%);
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(0,114,167)),
    color-stop(1, rgb(103,176,207))
);  
    font-size: 1em;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    position: relative; 
}
nav ul {
    padding: 0;
    margin: 0 auto;
    width: 600px;
    height: 40px;
}
nav li {
    display: inline;
    float: left;
}
nav a {
    color: #fff;
    display: inline-block;
    width: 110px;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    text-shadow: 1px 1px 0px #283744;
}
nav li a {
    border-right: 0px solid #576979;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
nav li:last-child a {
    border-right: 0;
}
nav a:hover, nav a:active {
    background-color: #8c99a4;
}
nav a#pull {
    display: none;
}

div.inline { 
    float:center; 
    display: inline-block;
    }

.clearBoth { clear:both; }

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 600px) {
    nav {
        border-bottom: 0;
        height: auto;
    }
    nav ul {
    width: 100%;
        display: none;
        height: auto;
    }
        nav li {
        width: 100%;
            }
    nav li a {
    width: 100%;
        border-bottom: 1px solid #576979;
    }

    nav a#pull {
        display: block;
        text-align: left;
        width: 100%;
        position: relative;
    }

    nav a#pull:after {
        content:"";
        background: url('images/nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
    nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid #576979;
    }

.clearBoth { clear:both; }
}

.erb-image-wrapper{
    max-width:900px;
    height:auto;
    position: right;
    display:block;
    margin:0 auto;      
}

.erb-image-wrapper img{
    width:100% !important;
    height:100% !important;
    display:block;
}

a {  
    text-decoration: none;  
}  

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:100%;
    background:#ffffff; 
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    color: #0072A7;     
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
    margin-left: auto ;
    margin-right: auto ;
    max-width:900px;    
    font-size: 1em;
    font-family: 'PT Sans', Arial, sans-serif;
}

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    font-size: 1em;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    color: #0072A7; 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

div#footer a:link{ color: #0072A7; }
div#footer a:hover{ color: #0072A7; }
div#footer a:active{ color: #0072A7; }
div#footer a:visited{ color: #0072A7; }

div#content a:link{ color: #0072A7; }
div#content a:hover{ color: #0072A7; }
div#content a:active{ color: #0072A7; }
div#content a:visited{ color: #0072A7; }

Answer 1

这是因为在你的导航中你使用了渐变，这在 IE8 和 IE9 中是不支持的。

将导航更改为使用背景，您可以为 IE 使用备用背景颜色:


背景:#0072A7；
背景:线性渐变(底部，rgb(0,114,167)0%，rgb(103,176,207)100%)；
背景:-o-线性渐变(底部，rgb(0,114,167)0%，rgb(103,176,207)100%)；
背景:-moz-linear-gradient(bottom, rgb(0,114,167) 0%, rgb(103,176,207) 100%);
背景:-webkit-linear-gradient(底部，rgb(0,114,167)0％，rgb(103,176,207)100％);
背景:-ms-linear-gradient(bottom, rgb(0,114,167) 0%, rgb(103,176,207) 100%);
背景:-webkit-渐变(
线性的，
左下角，
左上角，
颜色停止(0，rgb(0,114,167))，
颜色停止(1，rgb(103,176,207))
);


如果你真的想要渐变，你可以使用渐变的图像文件。