0

美好的一天社区。

我一直在尝试使用 CSS 为我的按钮设置样式，使其内部有一个很好的渐变，它适用于所有市长浏览器，甚至在 IE8 中（当然在一定程度上），但是在 IE9 中根本不显示“值”所以所有你可以看到是一个空按钮（渐变确实有效）

这是我的 CSS

.button{
    height:28px;
    min-width:150px;
    margin:2px;
    text-decoration:none;
    font:bold 10pt ,Arial, Helvetica;
    display:inline-block;
    text-align:center;
    color:#fff;
    border:0px solid;
    -moz-border-radius:.3em;
    border-radius:.3em;}

.button-green{                                                      
background:#0B7279;
background:-webkit-gradient(linear, left top, left bottom, from(#23B2B7), to(#0B7279) );
background:-moz-linear-gradient(-90deg, #23B2B7, #0B7279);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#23B2B7', endColorstr='#0B7279');}

以及显示它的 HTML：

<input class="button button-search" type="button" value="Filter Data" name="search_button" onclick="submitSearch('myValue')">

小提琴：按钮梯度测试

提前致谢。

PD：将按钮更改为锚点或可点击的 div 只有在万不得已时才会进行测试，否则将它们作为输入会更好。

编辑：问题似乎是我用这个CSS添加到按钮前面的背景图像，上面的定义'button-green'没有在这个例子中使用

.button-search{                                                     
padding-left:28px;
background:#0B7279;
background:url(<?php print $images ?>layout/buttonsearch.png) no-repeat left, -webkit-gradient(linear, left top, left bottom, from(#23B2B7), to(#0B7279) );
background:url(<?php print $images ?>layout/buttonsearch.png) no-repeat left, -moz-linear-gradient(-90deg, #23B2B7, #0B7279);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#23B2B7', endColorstr='#0B7279'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src="<?php print $images ?>layout/buttonsearch.png");*/

}

这是我要完成的示例：

火狐：button_from_firefox

IE8：button_from_ie8

IE9：button_from_ie9

4

1 回答 1

0

旧的 IE 特定filter样式非常脆弱，并且有许多已知的错误和故障。

我无法判断您所描述的是否是这些故障之一的症状，但听起来确实如此。

无论如何，我知道filter渐变会破坏你的border-radius; 这是 IE9 中的一个众所周知的错误，所以无论如何它看起来都很难看。

因此，我的建议是扔掉filter风格。还有其他选择。

您的第一个选择是使用 SVG 图像作为背景，作为数据 URL，如此处所述。

您可以保留filterIE8 的样式，但为 IE9 使用 SVG。当然，还有适用于 IE10/11 的标准 CSS3 渐变。

上面的链接将为您生成特定于 IE9 的 SVG 背景，这将完全按照预期工作。携带所有乱七八糟的编码 SVG 数据有点痛苦，而且使用起来并不容易，因此另一种替代解决方案是使用CSS3Pie脚本将 CSS3 渐变的支持填充到旧 IE 版本中。

这是我首选的解决方案，因为这意味着您可以为所有浏览器使用标准 CSS 代码。更容易使用。作为奖励，这也意味着您border-radius也可以开始在 IE8 中工作。

于 2013-11-05T13:53:33.040 回答