在IE瀏覽器中顯示下拉菜單時出現問題

我不確定爲什麼此下拉菜單在IE中不顯示。任何人都可以看到問題是什麼？它適用於所有其他瀏覽器，而不是IE。我知道IE中的漸變需要考慮很多。這是我的代碼。在IE瀏覽器中顯示下拉菜單時出現問題

.menu { 
    border: 1px solid #ccc; 
    background: #006699; /* Old browsers */ 
    background: -moz-linear-gradient(top, #006699 0%, #1f416b 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#006699), color-stop(100%,#1f416b)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #006699 0%,#1f416b 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #006699 0%,#1f416b 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #006699 0%,#1f416b 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #006699 0%,#1f416b 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#1f416b'); /* IE6-9 */ 
} 

.menu li a { 
    padding: 15px 45px; 
    text-decoration: none; 
    font-size: 0.9em; 
    color: #fff; 
    font-family: Arial, sans-serif;  
} 

.menu li.current > a, 
.menu li.current > a:hover, 
.menu li.current.hover > a { 
    background: rgb(70,168,217); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera11.10+ */ 
    background: -ms-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* IE10+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0); /* IE6-9 */ 
    background: linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */ 
    color: #fff; 
    text-shadow: 0px -1px 0px rgba(0,0,0,0.2); 
    cursor: default; 
} 

.menu li a:hover, 
.menu li.hover > a { 
    background: #b32416; /* Old browsers */ 
    background: -moz-linear-gradient(top, #b32416 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b32416), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #b32416 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #b32416 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #b32416 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #b32416 0%,#8f0222 44%,#6d0019 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b32416', endColorstr='#6d0019'); /* IE6-9 */ 
}

來源

2013-02-03 Ajay

我使用本網站創建我的所有梯度始終工作http://www.colorzilla.com。/gradient-editor/ – fredsbend

我們可以在jsFiddle上找到一個例子嗎？ –

@VukašinManojlović是的，我會上傳一個FS小提琴的例子，並提供一個鏈接 – Ajay

哪個IE版本？

我知道你在html頁面的頭部需要這樣的東西。與SVG或什麼有關。條件格式。

<!-- following class is conditional for IE9 and must be put in elements for css gradient to work --> 
<!--[if gte IE 9]> 
    <style type="text/css"> 
    .gradient { 
     filter: none; 
    } 
    </style> 
<![endif]-->

然後將此漸變類應用於使用漸變的元素。

http://www.colorzilla.com/gradient-editor/

編輯

確定。做了一點研究，發現過濾器應該有一個8位十六進制代碼，其中前兩個是不透明的。我認爲FF爲100％，00爲0。此外，使用雙引號」可能有所作爲

所以做這樣的事情：。

filter:progid:DXImageTransform.Microsoft.gradient 
(startColorstr="#ff7abcff",endColorstr="#ff4096ee",GradientType=0);

來源

2013-02-03 21:35:15 fredsbend

它不工作的IE版本是IE8。這裏是一個指向我所指的頁面的鏈接（http://www.condley.com/condley-llp）。所有其他瀏覽器ju不在IE8中。 – Ajay

@Ajay編輯。 – fredsbend

我嘗試過編輯，當我在下拉菜單中進行懸停時，仍然沒有收到任何內容。 – Ajay

在IE瀏覽器中顯示下拉菜單時出現問題

回答

相關問題