ホームページ > 記事 > ウェブフロントエンド > IE6 および 7 の input_html/css_WEB-ITnose
IE6 および 7 の input_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:41:17971ブラウズ
input ie html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">*{margin:0px; padding:0px}table{ border-collapse:collapse; border-spacing:0}</style></head><body> <table> <tr> <td> <input type="text" style="width:100px; height:50px; background:red; border:2px solid black" /> </td> </tr> <tr> <td> <input type="text" style="width:100px; height:50px; background:yellow; border:2px solid black" /> </td> </tr> <tr> <td> <div style="background:#138eee; width:100px; height:50px; border:2px solid black"></div> </td> </tr> </table></body></html> 1. -> 入力の上下にもう 1 つのピクセルがあることがわかります
2. この問題を解決するには -> float:left を使用します
3. 他に方法はありますか?
ディスカッションへの返信（解決策）
これは td のスペースが原因のようです。試してみてください。それを次のように変更します
<td><input type="text" style="width:100px; height:50px; background:red; border:2px solid black" /></td>
スペースはもともとそこにありました うまくいかない場合は...解決を続けてください...
なぜテーブルを使用するのですか？ divは使えないのでしょうか？
多くの方法を試しましたが、どれもうまくいきませんでした。float を使用して、03ae7924627a7897291bea15762cde4416b28748ea4df4d9c2150843fecfba68 を追加することしかできないようです。試してみた後、投稿者は失敗しました。上記の状況では、2 つの入力間の境界が太字で表示されます。
border-spacing 属性は、border-collapse 属性値が sepeate に設定されている場合にのみ有効です。
Table header f063bbf64471876f65bb3dc63054d79f
試してみたところ、元の投稿者が指摘した状況は発生しませんでした。2 つの入力間の境界線は太字で表示されました。それだけです。
投稿者は、この問題は IE6/IE7 で発生すると述べています。試してみましたが、本当にその通りでした！
input を div に置き換えるとギャップはなくなります
したがって、IE6/IE7 のテーブルの input 要素に問題がある可能性があります
テスト後、次のコードでこのギャップの問題を解決できます。
リーリー
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。