在IE8中的CSS不工作

這是我的頭，請有人可以幫忙嗎？我做了一個網站，工作在IE9 + 10和所有其他瀏覽器，但在IE8的動畫菜單不工作，並有使用，以查看該網站的人..在IE8中的CSS不工作

這裏是CSS：

.menu, .menu ul, .menu li, .menu a { 
    margin: 0; 
    padding: 0; 
    border: none; 
    outline: none; 
} 

.menu { 
    height: 40px; 
    width: 800px; 
    background: #f7d000; 
    background: -webkit-linear-gradient(top, #f7d000 0%,#f7d000 100%); 
    background: -moz-linear-gradient(top, #f7d000 0%,#f7d000100%); 
    background: -o-linear-gradient(top, #f7d000 0%,#f7d000 100%); 
    background: -ms-linear-gradient(top, #f7d000 0%,#f7d000 100%); 
    background: linear-gradient(top, #f7d000 0%,#f7d000 100%); 
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    border-radius: 0px; 
} 

.menu li { 
    position: relative; 
    list-style: none; 
    float: left; 
    display: block; 
    height: 50px; 
} 

.menu li a { 
    display: block; 
    padding: 0 14px; 
    margin: 5px 0; 
    line-height: 28px; 
    text-decoration: none; 
    font-family: 'Titillium Web', sans-serif; 
    font-weight: bold; 
    font-size: 15px; 
    color: #000000; 
    -webkit-transition: color .2s ease-in-out; 
    -moz-transition: color .2s ease-in-out; 
    -o-transition: color .2s ease-in-out; 
    -ms-transition: color .2s ease-in-out; 
    transition: color .2s ease-in-out; 
} 

.menu li:first-child a { 
    border-left: none; 
} 

.menu li:last-child a { 
    border-right: none; 
} 

.menu li:hover > a { 
    color: #ffffff; 
} 

.menu ul { 
    position: absolute; 
    top: 40px; 
    left: 0; 
    z-index: 999; 
    opacity: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    background: #f7d000; 
    -webkit-border-radius: 0 0 5px 5px; 
    -moz-border-radius: 0 0 5px 5px; 
    border-radius: 0 0 5px 5px; 
    -webkit-transition: opacity .25s ease .1s; 
    -moz-transition: opacity .25s ease .1s; 
    -o-transition: opacity .25s ease .1s; 
    -ms-transition: opacity .25s ease .1s; 
    transition: opacity .25s ease .1s; 
} 

.menu li:hover > ul { 
    opacity: 1; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
} 

.menu ul li { 
    height: 0; 
    overflow: visible; 
    padding: 0; 
    -webkit-transition: height .25s ease .1s; 
    -moz-transition: height .25s ease .1s; 
    -o-transition: height .25s ease .1s; 
    -ms-transition: height .25s ease .1s; 
    transition: height .25s ease .1s; 
} 

.menu li:hover > ul li { 
    height: 36px; 
    overflow: visible; 
    padding: 0; 
} 

.menu ul li a { 
    width: 180px; 
    padding: 8px 10px; 
    margin: 0; 
    border: none; 
    border-bottom: 1px solid #f7d000; 
} 

.menu ul li:last-child a { 
    border: none; 
}

該網站是：www.softwaretestingawards.com任何幫助將不勝感激！

來源

2013-05-02 avamonroe

說實話，如果在網站功能IE8，沒有花哨的動畫，這應該是足夠的。如果瀏覽器不自然地支持某些東西，我們不應該強迫它這樣做，只是因爲有些用戶懶得使用他們瀏覽器的最佳版本。 – Kyle 2013-05-02 08:52:35

我爲你清理了你的代碼，我想你實際上沒有在你的css文件中有'
'。 – Blowsie 2013-05-02 08:56:05

你可以把這個哦jsfiddle.net？ – gaynorvader 2013-05-02 08:56:14

IE8不支持CSS3動畫。

看到這個參考： http://caniuse.com/#search=css%20tran

你很多要考慮使用JavaScript動畫，像jQuery.animate

來源

2013-05-02 08:57:54 Blowsie

是啊
s只是在這裏顯示 – avamonroe 2013-05-02 10:41:50

@avamonroe不需要它們，SO很好地處理新行。 – Blowsie 2013-05-02 11:06:09

hehe我知道張貼在這裏。編輯的CSS沒有工作：/ – avamonroe 2013-05-02 12:49:42

它不會在Internet Explorer中工作的原因8是因爲它不支持CSS3動畫。我建議您製作一個腳本來檢測Internet Explorer 8是否正在使用，如果是，則動態更改網站，以免它出現花哨的CSS3動畫。

來源

2013-09-29 06:50:29 Domecraft

，使工作在IE8中的CSS，你可以嘗試使用PIE.htc，如果你想http://css3pie.com/demos/參考，本網站解決方案和演示，實際上它爲我工作:)

來源

2014-07-16 10:24:02 Sarav

在IE8中的CSS不工作

回答

相關問題