ホームページ > ウェブフロントエンド > htmlチュートリアル > input 入力ボックスの border-radius 属性は、IE8_html/css_WEB-ITnose で完全に互換性があります。

input 入力ボックスの border-radius 属性は、IE8_html/css_WEB-ITnose で完全に互換性があります。

WBOY
リリース: 2016-06-24 11:36:19
オリジナル
1312 人が閲覧しました

作業中に、ほとんどの検索ボックスの角が丸くなっていることがわかりました。このため、経験の浅いフロントエンド スタッフは、input タグに border-radius 属性を追加すれば問題が解決すると考えがちです。 。これは確かに良い方法ですが、border-radius は CSS3 プロパティであり、IE8 とは互換性がないことを忘れないでください。 ! !問題は、IE8 と完全な互換性を持たせるにはどうすればよいでしょうか?

CSS3 属性を IE8 と互換性を持たせる方法はインターネット上にたくさんあります。ファイル PIE.htc を導入する必要があります。ファイルを検索してダウンロードするのは簡単だと思いますが、position:relative;behavior:url( PIE.htc); 角丸が実装されていることがわかりましたが、図のように黒い境界線が表示されました

IE8 の下に黒い境界線があります

解決策:

input タグの境界線を変更します。なし; 外側の円 コーナーの境界線は、外観に影響を与えないように、マージンまたはパディングを組み合わせてラベルを設定します。

最終的な結果は、下の図のようになります。互換性があります

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート