0

ご挨拶。次のレガシーコードで問題が発生しています。送信ボタンが消えるIE7を除いて、すべて問題ありません。ページにはまだスペースが残っていますが、表示されません。hasLayoutを強制するさまざまな方法を試しましたが、成功しませんでした。助言がありますか？

XHTML（XHTML 1.0 Strict DOCTYPE）：

<div id="headerFunctionality" class="clearfix">
<div id="headerSearch" class="clearfix">
<form action="http://foo.com" method="GET">
<label for="q">Search</label>
<input id="q" name="q" type="text" class="text" />
<input type="submit" id="btn_search" value="Search">
</form>
</div>
</div>

CSS：

#headerFunctionality {
    float: right;
    display: inline;
    margin: 24px 14px 25px 0; 
}

#headerSearch{
    float: left;
    margin-left: 20px;
    width: auto;
}

#headerSearch label{
    position: absolute;
    top: -5em;
    color: #FFF;
}

#headerSearch input.text{
    width: 133px;
    height: 18px;
    border: 1px solid #999;
    font-size: 0.69em;
    padding: 2px 3px 0;
    margin: 0 6px 0 0;
    float: left;
}

/* Replace search button with image*/
input#btn_search {
    width: 65px;
    height: 20px;
    padding: 20px 0 0 0;
    margin: 1px 0 0 0;
    border: 0;
    background: transparent url(../images/btn.search.gif) no-repeat center top;
    overflow: hidden;
    cursor: pointer; /* hand-shaped cursor */
    cursor: hand; /* for IE 5.x */
}
form>input#btn_search { /* For non-IE browsers*/
    height: 0px;
}

input#btn_search:focus, input#btn_search:hover {

background: transparent url(../images/btn.search.over.gif) no-repeat center top;

}

4

6 に答える 6

4

display:block入力のcssに追加されていることを確認しましたか? それはうまくいくはずです。

于 2010-11-03T04:28:46.947 に答える
3

これは、IE6.0 および 7.0 でのテキスト インデント / 置換ボタンのイメージの問題のようです。このソリューションは、私にとって数回うまくいきました。

これらのブラウザ バージョン用に別のスタイルシートを作成し、次のコードをヘッダーに挿入します。

<!--[if lt IE 8]>
        <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

CSS ファイルで、次のようなことを試してください (これを input#btn_search に変更するか、具体的に対象とするものに変更できます)。

#btn_search {
   width: 85px;
   height: 20px;
   padding: 20px 0 0 0;
   margin: 1px 0 0 0;
   border: 0;
   background: transparent url(../images/btn.search.gif) no-repeat center top;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* for IE 5.x */
   font-size: 0;
   color: #fff;
   text-align: right;
   text-indent: 0;
}

「色」は背景と同じ色にする必要があります。

「幅」は、画像の幅よりも 20 ～ 30 ピクセル大きくする必要があります。

詳細とヘルプについては、http: //mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solutionを参照してください。

于 2011-04-28T15:44:49.243 に答える
1

これを引き起こす可能性のあるコードから、次の 2 つのことがわかります。

1 - 画像 btn.search.gif は完全に透明であるか、背景の色であるか、または見つかりません。ボタンには背景色も境界線もないため、画像/テキストがない場合は表示されません

2 - ボタンの可視性はなしに設定されています。これにより、ページにスペースが残りますが、ボタンはレンダリングされません。firebug のスタイルを見てもらえますか?

于 2009-10-29T22:17:00.590 に答える
1

私は最終的に以下を削除してこれをソートしました：

form>input#btn_search { /* For non-IE browsers*/
    height: 0px;
}

何年も前にどこかで読んだ後、これを常に CSS 画像置換に含めていましたが、それを除外しても他のブラウザーには影響がないようで、IE7 で問題が修正されました。

于 2009-10-29T23:21:29.060 に答える
0

name 属性を追加すると機能しますか?

于 2009-10-29T22:32:00.673 に答える
0

この問題は、ギロチン バグに起因する可能性があります。これは、:hover、float、およびレイアウトの特定の組み合わせが存在する場合に発生する IE6 および IE7 のバグです (詳細についてはリンクを参照してください)。私はこれを挿入すると信じています：

<div class="clear"><!-- --></div>

直前に</form>、次の CSS を適用します。

.clear {clear:both;}

それを修正します。

于 2009-10-29T23:07:01.507 に答える