css - IE 8 和 9 以及 CSS 渐变问题

Question

如果你去http://www.aerlawgroup.com在 IE 8 或 9 上，您可以看到 CTA 按钮显示为奇怪的红色，而不是预期的橙色渐变。

有谁知道如何修复它以使其按预期呈现？谢谢。

   .button2 {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 8px 24px;
    border: 1px solid #a56317;
    border-radius: 1px;
    background: #992828;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffb14a), to(#c76e08));
    background: -moz-linear-gradient(top, #ffb14a, #c76e08);
    background: linear-gradient(to bottom, #ffb14a, #c76e08);
    text-shadow: #764711 1px 1px 1px;
    font: normal normal bold 18px arial;
    color: #ffffff;
    text-decoration: none;
    /*top: 248px;
    left: 97px;*/
}
.button2:hover,
.button2:focus {
    border: 1px solid #ec8d21;
    background: #992828;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffd459), to(#ef840a));
    background: -moz-linear-gradient(top, #ffd459, #ef840a);
    background: linear-gradient(to bottom, #ffd459, #ef840a);
    color: #ffffff;
    text-decoration: none;
}
.button2:active {
    background: #982727;
    background: -webkit-gradient(linear, left top, left bottom, from(#996a2c), to(#c76e08));
    background: -moz-linear-gradient(top, #996a2c, #c76e08);
    background: linear-gradient(to bottom, #996a2c, #c76e08);
}

Answer 1

对于 IE9-，background:linear-gradient 或特定于供应商的语法将不起作用，因为那是 CSS3，您需要使用他们的老式专有语法:

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

将它放在该按钮的 CSS 分配的底部，您应该是安全的。如果您仍然看不到它，请添加:

zoom:1;

对于非 block 元素，有时这对于梯度生效是必要的。