IE9中的输入按钮图像样式答案

【问题标题】：Input button image styling in IE9IE9中的输入按钮图像样式
【发布时间】：2012-01-23 09:27:05
【问题描述】：

我正在使用 type=image 的输入来设置表单的样式。它在 FF 中渲染得很好，但在 IE 中却不行（下图），它添加了斜边边框。它还在我的图像上显示了小图标的东西，尽管我猜那是因为它是一个没有关联操作的表单元素，也许？ -

输入的样式如下，非常简单：

    input.search-button {
        display:block;    
        float:left;
        width:25px;
        height:25px;
        background:url(images/search.png) no-repeat;
}

我试过添加边框：0，不高兴。关于如何最好地整理演示文稿的任何想法？

【问题讨论】：

你试过border-style: none;或border-style: solid;吗？
是否也可以分享搜索按钮的html部分？

标签： html css forms internet-explorer-9

【解决方案1】：

对于边框，尝试设置border:none;。对于输入，我会仔细检查您的路径。看起来您正试图在 src 属性中使用实际图像的背景图像代替。

另外，尝试使用正斜杠 (/) 引导您的图像路径，这将带您一直到根目录，然后从那里向下钻取。

希望这会有所帮助！

马特

【讨论】：

哈哈。是的。就是这样 - 如果图像是图像而不是背景，则会有所帮助。悬停状态如何？这可能吗？
你在使用 jQuery 吗？如果是这样，那么只需为输入分配一个 id，然后将该 id 用作选择器并像这样动态切换其“src”属性： $('#myImageInputId').attr('src','myNewUrl');
显然，您需要将其包装在 jQuery mouseover 事件侦听器中。
刚刚意识到 - 将按钮更改回 type=submit 允许通过 css 进行样式设置，使用 background-image 和 :hover
确实如此。我从来没有亲自使用 type=image，但我认为你一定有你的理由 ;)。

【解决方案2】：

我希望 IE9/any 可以通过在 html 头部添加下面的 meta 行来呈现为 IE8/IE7

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>

那么相同的 css 适合每个 IE 版本

【讨论】：