ie6_html/css_WEB-ITnose の li に画像を挿入するとギャップが発生します-htmlチュートリアル-php.cn

ie6_html/css_WEB-ITnose の li に画像を挿入するとギャップが発生します

WBOY

リリース： 2016-06-24 11:28:24

オリジナル

1000 人が閲覧しました

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 では上記のバグが発生します。