ホームページ >ウェブフロントエンド >htmlチュートリアル >IE BUG_HTML/Xhtml_Webpage Production でボタンが両側に引き伸ばされる

IE BUG_HTML/Xhtml_Webpage Production でボタンが両側に引き伸ばされる

WBOY
WBOYオリジナル
2016-05-16 16:43:581018ブラウズ

ボタン (input、button) を記述すると、IE では次のようになります。
単語の数が増えるにつれて、2 つの辺の間のスペースがますます大きくなります。
WINのXPスタイルでは、ワード数が多いと両側にひどいギザギザが現れます。
その理由は何ですか?
Blue Ideal のオリジナル WEB 標準化コラムの Bamboo zbm2001z は次のように答えています。
1. IE がボタンの値を 4 バイト (漢字 2 文字) 増やすと、ボタンの両側に が表示されます。 1 バイトの合計パディング幅。
2. IE のボタンのデフォルトのスタイル (XP スタイル) は背景として固定サイズの角丸長方形の画像であるため、ボタンの幅と高さを大きくすると、この固定サイズの角丸長方形の画像の端が自然に表示されます。毛引き」現象。
2 番目の問題については、WIN システム自体のバグが修正されない限り、当面解決する方法はありませんが、1 つ目の問題についてはまだ修正できます。
IE でボタン要素のオーバーフロー属性の可視値を設定します (注: パディング値は、overflow:visible 属性が設定された後にのみ有効です)。前回書いた「origin」の記事「その後の応用」の記事で使用させていただきました。しかし、今日「IE の引き伸ばされたボタンの問題」を読んだ後、まだ小さなバグがあることがわかりました。ボタンが表のセルに配置されている場合、ボタンは正しく表示されますが、元々予約されていた幅のサイズは変更されません。 、まだスペースを占有している場合、IE6 ではボタンの幅を 0 に設定する必要があります (IE7 にもこのバグがありますが、それを解決する良い方法はまだありません)。
最終的な修復コードは次のとおりです (デモ)。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。