如何讓我的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是非常難讀（嘗試新線至少當事情變得長），但在第一次一眼看上去你方方面面都考慮周全。下面是一個示例梯度（更高的對比度灰色AKA黑色玻璃），你可以看看：

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/（這是我偷了那個漸變的地方）