IE7-8 - Sprite Hack

时间:2012-06-15 19:56:17

标签: css internet-explorer-8 internet-explorer-7 sprite

我正在使用精灵作为输入按钮。它在Firefox和>中工作正常。 IE8。但是,在IE7和8中,ID值显示在png图形上。它看起来像这样:

(我会嵌入,但我不允许):Pre-Hack Sprite

我经历了一次黑客攻击,最大限度地减少了字体大小和行高。

font-size:0px;      /*IE7-8*/
line-height:0px;    /*IE7-8*/

然后创建了几乎看起来像按钮的划痕:

Post-Hack Sprite

有什么想法吗?这是我的HTML:

<form action='memberSelection' method='post'>
<div id="providersearchopt1">
     ...
<p class="left"><input class="btnsearch" type="submit" id="formSubmit" name="formSubmit" /></p>

这是CSS:

    input[type="submit"].btnsearch {
width:96px;
height:27px;
background-color:transparent;
background-position:0px 0px;
background-image:url(images/btn-search.png);
cursor: pointer;
border: none;
color: transparent;
font-size:0px;      
line-height:0px;        
}
input[type="submit"].btnsearch:hover {
background-position:0px -27px;
background-image:url(images/btn-search.png);
}

编辑 - 解决方案:

CSS的变化:

line-height: 100px;        /*IE7-8*/
font-size: 0px:            /*IE7-8*/

这将在FF和IE中都有效。

1 个答案:

答案 0 :(得分:1)

你可以使用type =“image”,我认为悬停也适用于js我忘记了。

或者您可以使用锚点制作按钮并使用JS提交