0

我正在尝试为在 IE8 和 IE9 上“优雅地”降级的按钮创建渐变效果。我有一个光泽渐变按钮，我所做的是为了在 IE9 中获得相同的光泽外观和感觉，我使用的是 SVG 背景图像。对于 IE8，我决定放弃光泽，只坚持基本的两级渐变，问题是，一旦我添加过滤器，它就会优先于 IE9 中的背景，这是我不希望发生的。这个问题有解决方法吗？以下是CSS

    input[type="button"], input[type="submit"], input[type="reset"], button {
    padding: 3px 10px 3px 10px;
    margin: 0;
    border: none;
    color: white;
    outline: 0;
    font-size: 0.875em;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    overflow: visible;
    width: auto;
    background: #094fa4;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009ee5', endColorstr='#094fa4',GradientType=0 );
    background-image: url(../images/btn.svg);
    background: -moz-linear-gradient(top, #2261ad 0%, #2261ad 50%, #094fa4 50%, #094fa4 100%);
    background: -webkit-linear-gradient(top, #2261ad 0%, #2261ad 50%, #094fa4 50%, #094fa4 100%);
    background: -ms-linear-gradient(top, #2261ad 0%, #2261ad 50%, #094fa4 50%, #094fa4 100%);
    /*background:linear-gradient(to bottom, #2261ad 0%, #2261ad 50%, #094fa4 50%, #094fa4 100%);*/
    border-top: 1px solid #4379B9;
    border-bottom: 1px solid #08438C;
    border-radius: 4px;
    cursor: pointer;
  }
4

1 回答 1

0

您可以对IE8使用 CSS hack 。像这样写：

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009ee5', endColorstr='#094fa4',GradientType=0 )\9; //for IE8 & below.
background-image: url(../images/btn.svg);

阅读更多信息http://www.gravitationalfx.com/css-hacks-for-ie-targeting-only-ie8-ie7-and-ie6/

或者

您可以对不同的浏览器使用条件注释http://www.quirksmode.org/css/condcom.html

于 2012-08-08T10:03:33.493 回答