html - 如何让我的 css 渐变在 IE 中工作？

Question

http://www.10thplanetjjchicago.com/

在 Firefox/Chrome/Safari/Opera 中似乎一切正常。但我似乎无法让我的内容 div 在 Internet Explorer 中正确显示。渐变只是不显示或切断 - 但文本和内容将显示。我一直在尝试重新排序元素等等，但我想不通:/

要查看我的代码，只需查看源代码即可。

CSS 已最小化，因此这是 CSS:

body {
    background: #080808;
    margin: 0;
    padding: 0;
}
#bg {
    background: linear-gradient(to bottom,#232323,#080808);
    background: -moz-linear-gradient(top,#232323,#080808);
    background: -ms-linear-gradient(top,#232323,#080808);
    background: -o-linear-gradient(top,#232323,#080808);
    background: -webkit-linear-gradient(top,#232323,#080808);
    background: -webkit-gradient(linear,left top,left bottom,from(#232323),to(#080808));
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#232323',endColorstr='#080808',GradientType=0);
    position: absolute;
    top: 0;
    width: 100%;
    height: 531px;
}
.header {
    background: #282828;
    background: linear-gradient(to bottom,#040404,#282828);
    background: -moz-linear-gradient(top,#040404,#282828);
    background: -ms-linear-gradient(top,#040404,#282828);
    background: -o-linear-gradient(top,#040404,#282828);
    background: -webkit-linear-gradient(top,#040404,#282828);
    background: -webkit-gradient(linear,left top,left bottom,from(#040404),to(#282828));
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#040404',endColorstr='#282828',GradientType=0);
    border: 1px solid #7ba145;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    margin: 50px auto;
    width: 900px;
    height: 85px;
}
.logo {
    border: 0;
    opacity: .9;
}
.logo: hover {
    opacity: 1;
}
.nav-left,.nav-right {
    float: left;
    margin-top: 32px;
    text-align: center;
    width: 338px;
    word-spacing: 40px;
}
.nav-middle {
    float: left;
    margin-top: -48px;
    position: relative;
    z-index: 2;
}
a.nav-link: link,a.nav-link: visited {
    color: #b5ed46;
    font: 18px impact,tahoma,arial;
    text-decoration: none;
    opacity: .8;
}
a.nav-link: hover {
    color: #eee;
    border-bottom: 2px solid #96c34b;
    opacity: .9;
}
.background {
    text-align: center;
}
.bg-img {
    border-left: 1px solid #96c34b;
    border-right: 1px solid #96c34b;
    margin-top: -50px;
    opacity: .9;
}
.bg-img: hover {
    opacity: 1;
}
.main {
    background: #303030;
    background: linear-gradient(to bottom,#171717,#303030);
    background: -moz-linear-gradient(top,#171717,#303030);
    background: -ms-linear-gradient(top,#171717,#303030);
    background: -o-linear-gradient(top,#171717,#303030);
    background: -webkit-linear-gradient(top,#171717,#303030);
    background: -webkit-gradient(linear,left top,left bottom,from(#171717),to(#303030));
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#171717',endColorstr='#303030',GradientType=0);
    border: 1px solid #96c34b;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    margin: -4px auto;
    padding: 32px 32px 16px;
    width: 836px;
}
.content {
    float: left;
}
.title {
    color: #96c34b;
    font: 18px impact,tahoma,arial;
    opacity: .9;
    word-spacing: 3px;
}
.title: hover {
    color: #eee;
    border-bottom: 2px solid #96c34b;
}
a: link,a: visited {
    color: #b5ed46;
    text-decoration: none;
}
a: hover {
    text-decoration: underline;
}
p {
    color: #eee;
    font: 12px tahoma,arial;
    line-height: 15px;
    margin-bottom: 20px;
    opacity: .8;
    text-align: justify;
    width: 550px;
    word-spacing: 3px;
}
.side-panel {
    color: #efefef;
    float: right;
    font: 11px tahoma,arial;
    line-height: 14px;
    margin-bottom: 20px;
    opacity: .9;
    text-align: justify;
    width: 250px;
    word-spacing: 3px;
}
p: hover {
    color: #efefef;
    opacity: .9;
}
.side-panel: hover {
    color: #fff;
}
.copyright {
    color: #ddd;
    clear: both;
    font: 10px tahoma,arial;
    text-align: center;
    opacity: .8;
}
.copyright: hover {
    color: #efefef;
    opacity: .9;
}

Answer 1

您的 CSS 很难阅读(至少在内容变长时尝试换行)，但乍一看，您似乎涵盖了所有基础知识。这是一个示例渐变(对比度更高的灰色又名黑色玻璃)，您可以看一下:

background: #959595; /* Old browsers */
background: -moz-linear-gradient(top,  #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#959595), color-stop(46%,#0d0d0d), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(76%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* IE10+ */
background: linear-gradient(to bottom,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */

我不会尝试编写渐变代码，因为同时更改所有这些值总是很痛苦。试试这个:http://www.colorzilla.com/gradient-editor/ (这是我从那里偷来的渐变)