0

入力ボタンとしてスプライトを使用しています。Firefox および > IE8 では問題なく動作します。ただし、IE7&8 では、ID 値が png グラフィックの上に表示されます。次のようになります。

(埋め込みますが、許可されていません): Pre-Hack Sprite

私は調べて、フォントサイズと行の高さを最小限に抑えるハックを見つけました。 

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

これにより、ボタンの上にほとんど引っかき傷のように見えるものが作成されました。

ハック後のスプライト

何か案は？ここに私の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 の両方で機能します。

4

1 に答える 1

1

type = "image"を使用できます。ホバーは、私が本当に忘れていたjsでも機能すると思います。

または、アンカーを使用してボタンを作成し、JSを使用して送信することもできます

于 2012-06-15T21:01:02.850 に答える