ホームページ > 記事 > ウェブフロントエンド > IE BUG_HTML/Xhtml_Webpage Production でボタンが両側に引き伸ばされる
ボタン (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 にもこのバグがありますが、それを解決する良い方法はまだありません)。
最終的な修復コードは次のとおりです (デモ)。