美好的一天社区。p>
我一直在尝试使用 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')">
fiddle :Button Gradient Test
提前致谢。
PD:将按钮更改为 anchor 或可点击的 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");*/
这是我要完成的示例:
火狐:
IE8:
IE9:
最佳答案
旧的 IE 特定的 filter
样式非常脆弱,并且有许多已知的错误和故障。
我无法判断您所描述的是否是这些故障之一的症状,但听起来确实如此。
无论如何我都知道filter
渐变会破坏你的border-radius
;这是 IE9 中的一个众所周知的错误,所以它看起来会很难看。
因此,我的建议是完全放弃 filter
样式。还有其他选择。
您的第一个选择是使用 SVG 图像作为背景,作为数据 URL,如 here 所述.
您可以为 IE8 保留 filter
样式,但为 IE9 使用 SVG。当然,还有适用于 IE10/11 的标准 CSS3 渐变。
上面的链接将为您生成特定于 IE9 的 SVG 背景,这将完全按预期工作。虽然携带所有这些困惑的编码 SVG 数据有点痛苦,而且使用起来并不容易,因此另一种替代解决方案是使用 CSS3Pie用于将 CSS3 渐变支持填充到旧版 IE 中的脚本。
这是我的首选解决方案,因为这意味着您可以为所有浏览器使用标准 CSS 代码。更容易使用。作为奖励,这也意味着您的 border-radius
也可以开始在 IE8 中工作。
关于html - 按钮中的 IE9 过滤器不显示值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19790325/