IE9过滤按钮未显示值

时间:2013-11-05 13:38:56

标签: html css internet-explorer

美好的一天社区。

我一直试图用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')">

小提琴:Button Gradient Test

提前致谢。

PD:将按钮更改为锚点或可点击的div只会在最后的情况下进行测试,否则将它们作为输入会更好。

编辑:问题似乎是我用这个CSS添加到按钮前面的背景图片,上面的定义'button-green'没有在这个例子中使用< / p>

.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");*/

}

这是我想要完成的例子:

Firefox:button_from_firefox

IE8:button_from_ie8

IE9:button_from_ie9

1 个答案:

答案 0 :(得分:0)

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

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

无论如何,我确实知道filter渐变会破坏你的border-radius;这是IE9中一个众所周知的错误,因此看起来很丑陋。

因此,我的建议是彻底抛弃filter风格。还有其他选择。

您的第一个选择是使用SVG图像作为背景,作为数据网址,如here所述。

您可以保留IE8的filter样式,但使用SVG for IE9。当然,IE10 / 11的标准CSS3渐变。

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

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