css - 输入提交标签在 IE 'submit query' 中显示值属性文本

Question

input.icon 
{
    border: 0;    
    cursor: pointer;
    margin: 0;
    padding: 0;
    width: 16px;
    height: 16px;
    text-indent: -1000em;
}
input.edit {         
    background: transparent url('/edit.png') no-repeat center top; 
}

在像这样的元素上:

<input type="submit" class="icon edit" onclick="...." />

它在 firefox 中呈现良好，图像上也没有文本。在 IE 中它显示值属性的文本。

这是为什么？ 实际上我什至没有设置 value 属性，它默认为“提交查询”。

此外，我认为我的 CSS 可以通过以下方式更加具体:

input.icon {
...
}
input.icon .edit {
...
}

但不知道为什么这对我不起作用，所以我也更改了第二个定义:

输入.编辑{ ..

为什么 input.icon .edit 不起作用？

我可以将这些样式放在 div 元素上吗？有什么不同？

Answer 1

你有几个问题。对于第一个。我在 IE8 中没有看到问题:

http://jsfiddle.net/rfYrq/

我在 IE8 中看不到文本。

---

问题 2:“为什么 input.icon .edit 不起作用？”

input.icon .edit 的含义是，任何具有 edit 类的元素 在 类为 图标。您真正想要的是同时 edit 和icon 类的任何输入。那将是这样的:

input.icon.edit

---

问题 3:“我可以将这些样式放在 div 元素上吗？”

是的。如果您使用自己的 css 覆盖按钮的样式并且显然使用 onclick 覆盖按钮的功能，您可以根据您的情况只使用 div 或 span 或其他元素。