IE6で画像要素imgに余分な空白がある
ページのDIV + CSSのレイアウトでは、遭遇IE6(もちろん、時にはFirefoxも時折発生します)冗長な空白の問題の下にブラウザで画像要素imgは、問題の解決策のために絶対に共通ですも&quotです;何が起こるかを参照してください"、異なるソリューションを使用するために、別の理由に応じて、ここで 画像レイアウトバグの下に冗長ギャップを解決する一般的な方法は参考までにここに要約されている。
1、画像をブロックレベルのオブジェクトに変換する。
つまり、imgに: display:blockを設定します。
この例のCSSコード一式を追加します。#sub img {display:block;}のようなCSSコードを追加します。
2. 画像の垂直方向のアライメントを設定する
つまり、画像のvertical-alignプロパティを"top, text-top, bottom, text-bottom"に設定すれば解決することも可能です。例えば、この例のようにCSSのコード一式を追加します。#sub img {vertical-align:top;} のようにします。
3、親オブジェクトのテキストサイズを0pxにする
つまり、#sub: font-size:0 の一行を追加します。
は問題を解決します。しかし、これによって、親オブジェクトのテキストが一つも表示されないという新たな問題も発生します。テキストが子オブジェクトで部分的に囲まれていても、子オブジェクトのテキストサイズを設定すれば表示されますが、CSSバリデーションではテキストが小さすぎるというエラーが表示されます。
4、親オブジェクトのプロパティを変更する
親オブジェクトの幅と高さが固定で、画像の大きさが親オブジェクトに依存する場合は、次のように設定します:overflow:hidden。
を使用して固定します。例えば、この場合、#subに以下のコードを追加します。width:88px;height:31px;overflow:hiddenです。
5. 画像のfloatプロパティを設定する
つまり、この例のようにCSSのコードを1行追加します。#sub img {float:left;} のようなCSSコードを追加します。
この方法は、テキストとグラフィックの混在を実現したい場合に適しています。
このメソッドは、順序でコードを書くときに、より意味と階層的な明快さを反映させるために、必然的にIDEを介して、ラベルや他のラベルは、DW"適用ソース形式&quotなどの改行を表示するようになり、コードのインデント表示を提供するために、台無しになるかもしれない、強調する必要がありますコマンドを実行します。ですから、この方法はバグが発生する状況を把握するためには使えますが、具体的な解決策は見てみないとわかりません。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
HTML要素の高さ、offsetHeight、clientHeight、scrollTopなどについて説明します。
-
複雑なテーブルヘッダーを実現するためのhtmlテーブルのサンプルコード
-
Html/Css(初めての方必見攻略法)
-
Html+cssでプレーンテキストとアイコン付きボタンを実現する
-
主要サイトの問題のページの新しいオープニングかどうかタグは、照合を開くには
-
INSとDELのタグ付きドキュメントを使用して、使用内容を変更することができます。
-
this.parentNode.parentNode(親ノードの親ノード)とは何ですか?
-
いくつかの古いプレーヤー用のエンベデッドコード
-
HTMLタグの一覧とその使用方法
-
WebページのレイアウトはIE6との互換性の問題を考慮する必要がある