用CSS样式的按钮元素不会在IE6中显示背景图像 [英] Button element styled with CSS is not showing the background-image in IE6

问题描述

我有一个针对IE 6的旧版网络应用程序，正在重新打开。这些按钮的默认浏览器按钮外观已替换为蓝色按钮图片。

我的下面的HTML和CSS在IE 8上可以正常工作，但在IE 6中不行。

HTML p>

 < button id =add>添加< / button> 
  

CSS

< pre class =lang-css prettyprint-override> button
{
width：110px;
height：28px;
background-image：url（'../ images / button.png'）;
background-color：transparent;
border：0px none＃ff0000;
cursor：hand;
font-family：Myriad Pro，Helvetica;
font-weight：bold;
font-size：12px;
color：#ffffff;
}


使用CSS，如何让背景图片显示在IE 6？

理想情况下，修复可以放在ie6.css中，以便在最终删除IE6支持时轻松删除。

---

请不要评论对IE6的支持。

解决方案

使用

code> background CSS属性而不是 background-image 属性执行博文（下面摘录）。

在Firefox 2.0中工作的background-image属性没有
对IE6有任何影响。经过一番谷歌搜索，我意识到
background-image属性将无法在IE上工作，我们需要使用
的背景属性。

这对我有用：

 按钮
 {
 background：transparent url（'../ images / button.png'）no-repeat top; 
} 
  

I have a legacy web application that is targeted for IE 6 and is being reskinned. The buttons are having the default browser button look replaced with a blue button image.

My following HTML and CSS works fine on IE 8, but not in IE 6.

HTML

<button id="add">Add</button>

CSS

button
{
    width: 110px;
    height: 28px;
    background-image: url('../images/button.png');
    background-color: transparent;
    border: 0px none #ff0000;
    cursor: hand;
    font-family: Myriad Pro, Helvetica;
    font-weight: bold;
    font-size: 12px;
    color: #ffffff;
}

Using CSS, how can I get the background image to show in IE 6?

Ideally the fix could be put in an ie6.css to make it easy to remove when IE6 support is eventually dropped.

---

Please no comments about dropping support for IE6. This legacy application is designed only for IE6 and used internally at an organisation where IE6 is the ONLY supported browser.

解决方案

Using the background CSS property instead of the background-image property does the trick as described in this blog post (excerpt below).

The background-image property that worked in Firefox 2.0 just did not have any effect on IE6. After a bit of googling, I realized that the background-image property will not work on IE and that we need to use the background property.

This is what works for me:

button
{
    background: transparent url('../images/button.png') no-repeat top;
}

这篇关于用CSS样式的按钮元素不会在IE6中显示背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！