IE bug：按钮图像背景

我正在处理一个我不能解决的奇怪的bug。IE bug：按钮图像背景

这是一个已知的错误，事实上我在网上找到了几个解决方案，但不幸的是，他们不适合我的情况！

下面是一个屏幕截图，显示了按钮在其他浏览器上的显示方式，而在IE上则显示为完全白色。

，我使用的CSS规则如下：

background:url('http://www.legrandclub.net/wp-content/uploads/2011/07/Send-Message.jpg'); 
width:113px; 
height:25px; 
border:0px;

我应该使用哪种附加规则？

感谢

来源

2012-05-12 pAkY88

你可以做一个测试用例吗？ http://jsfiddle.net//http://jsbin.com/ – thirtydot

我在这两个网站上做了测试，并且按钮呈现正确。 – pAkY88

然后按照下列步骤。使用http://jsbin.com/。清空HTML窗格。将显示问题的整个HTML页面复制到HTML窗格中。在''内添加您的页面使用的所有CSS。我假设JavaScript与这个问题无关，所以忘掉它。保存你的演示，并链接到这里。 – thirtydot

从bp.css来的问题，行〜660：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed',GradientType=0); /* IE6-9 */

这梯度在上面绘制的一切。按钮的其余部分隐藏在其下面。

现在你知道问题出在哪里了，你应该可以解决它。您需要filter: none的#send_reply_button，否则您需要重写/删除filter。

来源

2012-05-12 14:16:03 thirtydot

+1哇。这是晦涩 - 优秀的发现！ –

也许只是建立在CSS按钮太...

<a href="send.htm" class="abutton">Send Message</a> 

a.dbutton { 
    font-family: Verdana; font-size: 13pt; font-weight: bold; 
    position: relative; 
    background-color: #e60000; 
    margin-top: 3px; 
    margin-bottom: 3px; 
    margin-left: 21%; 
    margin-right: 21%; 
    text-decoration:none; 
    display:block; 
    padding:8px; 
    border:1px solid #000; 
    text-align:center; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    -o-border-radius:5px; 
    border-radius:5px; 
}

来源

2012-05-12 14:08:29

谢谢你的建议，但我想保留一个图像作为背景（如果可能的话）。 – pAkY88

IE bug：按钮图像背景

回答

相关问题