Input标记显示IE 'submit查询‘中的值属性文本

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属性的文本。

为什么会这样？实际上我甚至没有设置value属性，它默认为‘提交查询’。

此外，我认为我的CSS可以通过以下操作更具体：

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

但这对我来说并不管用，所以我也改变了第二个定义：

input.edit { ..}

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

我可以把这些样式放在div元素上吗？有什么关系呢？

Answer 1

你有一些问题要问。第一个。我在IE8中没有看到这个问题：

http://jsfiddle.net/rfYrq/

我在IE8中没有看到文本。

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

input.icon .edit的意思是，edit 类在中的任何元素都是具有icon类的输入元素。您真正想要的是、、edit和icon类的任何输入。会是这样的：

input.icon.edit

问题3：“我能把这些样式放在div元素上吗？”

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