作業中に、ほとんどの検索ボックスの角が丸くなっていることがわかりました。このため、経験の浅いフロントエンド スタッフは、input タグに border-radius 属性を追加すれば問題が解決すると考えがちです。 。これは確かに良い方法ですが、border-radius は CSS3 プロパティであり、IE8 とは互換性がないことを忘れないでください。 ! !問題は、IE8 と完全な互換性を持たせるにはどうすればよいでしょうか?
CSS3 属性を IE8 と互換性を持たせる方法はインターネット上にたくさんあります。ファイル PIE.htc を導入する必要があります。ファイルを検索してダウンロードするのは簡単だと思いますが、position:relative;behavior:url( PIE.htc); 角丸が実装されていることがわかりましたが、図のように黒い境界線が表示されました
IE8 の下に黒い境界線があります
解決策:
input タグの境界線を変更します。なし; 外側の円 コーナーの境界線は、外観に影響を与えないように、マージンまたはパディングを組み合わせてラベルを設定します。最終的な結果は、下の図のようになります。互換性があります