IE7で送信ボタンが消える

StackOverflow https://stackoverflow.com/questions/1646916

質問

ご挨拶。次のレガシーコードで問題が発生しています。送信ボタンが消える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

最後に、次を削除してこれをソートしました：

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

私はずっと前に読んだ後、CSS画像の置換にこれを常に含めていましたが、それを除外することは他のブラウザに影響を与えていないようで、IE7の問題を修正しました。

他のヒント

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

これは、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;
}

<！> quot; color <！> quot;背景と同じ色にする必要があります。

<！> quot; width <！> quot;画像の幅よりも20〜30ピクセル大きい必要があります。

詳細とヘルプはこちらでご覧いただけます： http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution

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

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

2-ボタンの可視性をnoneに設定します。これにより、ページ上にスペースが残りますが、ボタンはレンダリングされません。 firebugのスタイルを見ることができますか？

name属性を追加した場合、機能しますか？

問題はギロチンバグに起因する可能性があります。これはIE6とIE7のバグで、：hover、float、layoutの特定の組み合わせが存在する場合に発生します（詳細についてはリンクを参照してください）。これを挿入すると思います：

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

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

.clear {clear:both;}

修正します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top