ホームページ >ウェブフロントエンド >htmlチュートリアル >ie6_html/css_WEB-ITnose の li に画像を挿入するとギャップが発生します
ie6_html/css_WEB-ITnose の li に画像を挿入するとギャップが発生します
- WBOYオリジナル
- 2016-06-24 11:28:241001ブラウズ
IE6で写真を挿入した後、Liの下部に隙間バグがあります。 これはIE6の古典的なバグです。解決策はたくさんありますが、今日は合計 5 つの解決策をまとめました。
Demo
html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="renderer" content="webkit"/> <meta name="keywords" content=""/> <meta name="description" content=""/> <title>demo</title> <link rel="stylesheet" href="css/main.css"/></head><body> <ul> <li><img src="images/cat.jpg"/></li> <li><img src="images/cat.jpg"/></li> <li><img src="images/cat.jpg"/></li> <li><img src="images/cat.jpg"/></li> <li><img src="images/cat.jpg"/></li> <li><img src="images/cat.jpg"/></li> </ul></body></html>
Css
@charset "utf-8";@import "E:/my_project/zSass/base";ul { width:774px; @include center-block; li { @include float; width:162px; height:162px; margin:0 10px 10px 0; background-color:#f00; }} ie6 の li では、li width を与えても、画像の下に 1 ～ 2px 程度の隙間があることがわかります。身長画像と同じです 画像に示すように、役に立ちません:
原因
コードを記述するとき、コードのきれいさと読みやすさのために、通常はタブ インデントを実行し、改行を入力します。この問題はキャリッジ リターンとライン フィード キャリッジ リターンにより、IE6 ではキャリッジ リターン文字が解析されず、キャリッジ リターン文字が自動的に生成されます。も文字の一種とみなされ、サイズや行の高さも存在するため、ie6 では上記のバグが発生します。
解決策
最初の方法: 最も単純で便利で最も暴力的な方法は、何もする必要はなく、HTML コードを圧縮するだけです。もちろん、HTML コードの読みやすさと保守性はそれほどフレンドリーではありません。
2 番目の方法: li と は文字の間に復帰文字が生成されるため、その文字サイズを変更できます。 コードは次のとおりです:
ul { font-size:0;} 3 番目の方法: li overflow:hidden を追加します。 ; 。
4 番目の方法: img を display:block; に設定します。
5 番目の方法: img をvertical-align:top/middle/bottom に設定します。
テストブラウザ: chrome/firefox/ie6-11