Wie bekomme ich meine css-Farbverlauf funktioniert im IE?

http://www.10thplanetjjchicago.com/

Alles scheint gut zu funktionieren, im Firefox/Chrome/Safari/Opera. Aber ich kann nicht scheinen, um meinen content-div auf display ordnungsgemäß in Internet Explorer. Die Steigung will einfach nicht anzeigen, oder schneidet noch der text und der Inhalt wird angezeigt. Ich habe das Spiel mit der Neuordnung von Elementen und so weiter, aber ich kann nicht herausfinden :/

Sehen mein code nur "Quelltext Anzeigen".

CSS minimiert, also hier ist der 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;
}
  • Es wäre einfacher zu helfen, wenn Sie konnte machen a jsfiddle demo (etwas, das Menschen können leicht Bearbeiten und damit Experimentieren).
InformationsquelleAutor no-name | 2013-05-09
Schreibe einen Kommentar