Проблема с форматированием линейного градиента CSS в разных браузерах

Question

Мне было поручено применить тему к веб-сайту, а тема, которую я получил, имеет некоторый странный синтаксис в файле css, с которым я раньше не сталкивался.

Тема отлично работает на Firefox и Chrome, но в IE я столкнулся с проблемами. В частности, с баром div, который горизонтально пересекает веб-страницу, становится почти прозрачным с некоторыми предметами, видимыми через него. Однако этого не происходит ни в Firefox, ни в IE.

Когда я исследовал источник страницы, я обнаружил, что у div были следующие варианты стилизации. -moz-linear-gradient и -webkit-gradient, поэтому я изначально думал, что проблема wsa.

#aqua_bar_bottom { 
     position:fixed; 
     bottom:0; right:0; left:0; 
     height:33px; 
     overflow:hidden; 
     background:-moz-linear-gradient(top, #CBCBCB, #A7A7A7); 
     background:-webkit-gradient(linear, left top, left bottom, 
      from(#CBCBCB), 
      to(#A7A7A7) 
     ); 
     border-top:1px solid #515151; 
     z-index:102; 
} 

я обнаружил через http://www.w3schools.com/css/css3_gradients.asp, что эти фоновые значения присваиваются Firefox и Chrome, и понял, что в браузере IE я использую должен быть вкладыш-градиент совместимым я добавил следующую строку background:linear-gradient(top, #CBCBCB, #A7A7A7);.

#aqua_bar_bottom { 
     position:fixed; 
     bottom:0; right:0; left:0; 
     height:33px; 
     overflow:hidden; 
     background:-moz-linear-gradient(top, #CBCBCB, #A7A7A7); 
     background:-webkit-gradient(linear, left top, left bottom, 
      from(#CBCBCB), 
      to(#A7A7A7) 
     ); 
     background:linear-gradient(top, #CBCBCB, #A7A7A7); 
     border-top:1px solid #515151; 
     z-index:102; 
} 

Это не решило проблему, хотя, похоже, эти веб-страницы IE не были затронуты этими изменениями.

Answer 1

Изменение свойства от background к background-image и top аргумент 'донизу' сделал трюк

background-image:linear-gradient(to bottom, #CBCBCB 0%, #A7A7A7 100%); 

Answer 2

Вы хотите:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cbcbcb', endColorstr='#a7a7a7',GradientType=0); 

Это работает для IE6-9.

10+ следует признать:

background: linear-gradient(top, #cbcbcb 0%,#a7a7a7 100%);