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