コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > IE ブラウザーでの一般的な CSS 互換性の問題_html/css_WEB-ITnose

IE ブラウザーでの一般的な CSS 互換性の問題_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:36:05
オリジナル
1615 人が閲覧しました

幅と高さのバグ

【1】IE6-ブラウザ配下の子要素は親で設定した幅と高さを拡張できる

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    height: 300px;    width: 300px;    background-color: #ccc;    border: 10px solid black;}.in{    height: 400px;    width: 100px;    background-color: red;    margin: 10px;    padding: 10px;    border: 1px solid black;}</style></head><body><div class="box" id="box">    <ul class="list" id="list">        <li class="in" id="test">test</li>    </ul>    </div></body>    </html>
ログイン後にコピー

【2】IE6-ブラウザ配下の最小高さの問題browser, set ( 0-15px) 高さが 15px 以下の要素は、IE6 では 15px として扱われます

[1] font-size を 0 に設定しますが、最小の高さは 2px です
[2] オーバーフローを設定します:非表示ですが、最小の高さは1pxです
[3] 最小の高さを0にするには、高さを設定しないしかありません

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}.box{    height: 0px;    background-color: #ccc;}</style></head><body><div class="box" id="box"></div></body>    </html>
ログイン後にコピー

境界線のバグ

【1】IE6-1pxの点線境界線の下ブラウザ、点線になります 点線になります

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}.box{    height: 300px;    width: 300px;    background-color: #ccc;    border: 1px dotted black;}</style></head><body><div class="box" id="box"></div></body>    </html>
ログイン後にコピー

【2】標準では背景が境界線の領域まで伸びますが、IE7ブラウザでは背景がパディング領域までしか伸びません

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}.box{    height: 300px;    width: 300px;    background-color:#ccc;    border: 10px dashed  red;}</style></head><body><div class="box" id="box"></div></body>    </html>
ログイン後にコピー

【3】IE10ブラウザの場合 タグに含まれる要素でボーダーを生成します

【解決策】{border: none}を設定します

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}img{    height: 300px;    width: 300px;    background-color:#ccc;}</style></head><body><a href="#"><img src="#"></a></body>    </html>
ログイン後にコピー

ボックスモデルのバグ

【1】IE7-ブラウザ 親にボーダーがあり、子要素の上下のマージン値が渡されるのを防ぐことができない 【解決方法】 親の haslayout をトリガーする

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    border: 10px solid black;    background-color: red;}.in{    height: 100px;    width: 100px;    margin-top: 50px;    background-color: blue;}</style></head><body><ul class="list">    <li class="in"></li></ul></body>    </html>
ログイン後にコピー

。 【2】IE7ブラウザでドキュメント宣言を設定しないと、ボックスモデルの解析がおかしくなります。奇妙なボックス モデルでは、コンテンツの幅 = width-2*padding-2*borderWidth になります

<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}.box{    height: 100px;    width: 100px;    border: 40px solid black;    background-color: red;}</style></head><body><div class="box" id="box"></div></body>    </html>
ログイン後にコピー

【3】IE6 ブラウザで負のマージン値を使用して要素を親の外に移動し、移動された要素を親のDroppedで一部が切り取られてしまいます

【解決策】子相対位置に相対位置を追加


<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    margin-left: 100px;    height: 300px;    width: 300px;    background-color: #ccc;}.in{    margin-left: -30px;    height: 100px;    width: 100px;    background-color: red;}</style></head><body><ul class="list">    <li class="in"></li></ul></body>    </html>
ログイン後にコピー

LIbug

【1】(Liの4pxギャップバグ) IE7ブラウザではli自体は浮かばないのですが、 li の下のコンテンツは余分な 4px ギャップが発生します

[解決策]

[1] li に float を追加します
[2]vertical-align を設定します

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    width: 200px;    background-color: lightgreen;}.in{    height: 100px;    background-color: lightblue;}</style></head><body><ul class="list">    <li class="in">        <span style="float: left">1231</span>    </li>    <li class="in">        <span style="float: left">1232</span>    </li></ul></body>    </html>
ログイン後にコピー

[2] (4px ギャップの共存の問題) liの下の最小の高さと) IE7 ブラウザ下で、4pxのギャップの問題とliの下の最小の高さの問題が混在する場合、垂直方向の配置の設定は無効です

【解決方法】 liにfloatを追加


<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    width: 200px;    background-color: lightgreen;}.in{    height: 12px;    background-color: lightblue;    overflow: hidden;    vertical-align: middle;}.span{    float: left;}</style></head><body><ul class="list">    <li class="in">        <span class="span">1231</span>    </li>    <li class="in">        <span class="span">1232</span>    </li></ul></body>    </html>
ログイン後にコピー

[3] ( Li の 3px ギャップのバグ) IE7 - ブラウザーの下の li の高さまたは幅またはズーム: 1 があり、インライン要素のみが含まれており、インライン要素は表示: ブロックに設定されています。li

の下にはさらに 3 ピクセルの垂直方向のスペースがあります。 【解決策】 li neutron 要素をトリガーする haslayout


<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    width: 200px;    background-color: lightgreen;}.in{    height: 100px;    background-color: lightblue;}.span{    display: block;}</style></head><body><ul class="list">    <li class="in">        <span class="span">1231</span>    </li>    <li class="in">        <span class="span">1232</span>    </li></ul></body>    </html>
ログイン後にコピー

floating bug

【1】(3pxbug) IE6ブラウザ下で浮動要素と非浮動要素が隣接すると3pxピクセルの隙間が生じます

【解決策】 】

[1]CSShackを使用し、浮動要素と逆方向のマージン値を-3px、非浮動要素の対応方向のマージン値を0に設定(IE6プレフィックスを追加)
[2]非浮動要素のマージン値を削除し、浮動要素を追加します。 

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}.box{    width: 100px;    height: 100px;}#box1{    float: left;    background-color: red;        _margin-right:-3px;    border-right: 1px solid green;}#box2{    margin-left: 100px;    _margin-left: 0;    border:1px solid black;    background-color: blue;        }</style></head><body><div class="box" id="box1"></div><div class="box" id="box2"></div></body>    </html>
ログイン後にコピー

[2] IE6 - 親要素がフローティングされ、子要素に高さが設定された後、親要素が幅を設定しない場合、幅は行全体を埋めます

[解決策]

[ 1] フローティングの親を与える 要素の幅を設定する
[2] 子要素の幅を設定する


、片方はフロートしません。フローティング要素は次の線に折りたたまれます




[4]（二重マージンバグ）IE6-ブラウザの下のブロック要素は浮かんでおり、水平マージン値を持っています。左マージンしかない場合、左端のフローティング ブロック要素の左マージンが 2 倍になります。右マージンしかない場合は、右端のフローティング ブロック要素の右マージンが 2 倍になります。左右両方の余白がある場合は、左端の余白と右端の余白が2倍に拡大されます。

【解決方法】 ブロック要素にdisplay:inlineを設定する

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    float: left;    background-color: green;}.in{    height: 100px;    background-color: yellow;}</style></head><body><ul class="list">    <li class="in">我是内容</li></ul></body>    </html>
ログイン後にコピー


[5] (margin-bottomBUG) IE7ブラウザで、親要素の幅の合計と要素の各行の幅の差が超える場合3px、またはあります 行が満たされていない場合、最後の行の margin-bottom は無効になります

【解決策】 margin-bottom を使用せず、代わりに margin-top を使用してみてください

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    width: 500px;    background-color: lightgreen;    overflow: hidden;}.in{    width: 100px;    height: 100px;}.in1{    background-color: lightyellow;}.in2{    background-color: lightblue;    float: right;}</style></head><body><div class="list">    <span class="in in1">我是不浮动</span>    <span class="in in2">我是右浮动</span></div></body>    </html>
ログイン後にコピー


　　【6】(文字溢出bug)IE6-浏览器下两个浮动元素(浮动元素不能是li)一个左浮无宽度，另一个右浮动宽度与父级宽度相差不超过3px，浮动元素中间有注释或者内联元素，文字就被复制
　　【解决】
　　　　[1]将注释去掉
　　　　[2]将内联元素变成块元素
　　　　[3]内联元素及注释整个用

包起来

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    width: 200px;}.in1{    float:left;}.in2{    float:right;    width:198px;}</style></head><body><div class="list">    <div class="in1"></div>    <!-- 我是--><span></span><!-- 我是 --><!-- 我是 -->    <div class="in2">多出来的一头猪吗</div></div></body>    </html>
ログイン後にコピー

定位bug

　　【1】在IE7-浏览器下子元素有相对定位，父级的overflow无效
　　【解决】给父级也设置相对定位

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    background-color: lightgreen;    width: 200px;    height: 100px;    overflow: auto;}.in{    position: relative;    width: 100px;    height: 300px;    background-color: lightblue;}</style></head><body><ul class="list">    <li class="in"></li></ul></body>    </html>
ログイン後にコピー

　　【2】在IE6-浏览器下浮动元素和绝对定位元素是并列关系，且浮动元素设置margin-left和width的和正好等于父元素的宽度，这时绝对定位元素会消失
　　【解决】给定位元素外面包一个div

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    background-color: lightgreen;    width: 200px;    height: 100px;}.in1{    position: absolute;    top: 0;    left: 0;    width: 100px;    height: 100px;    background-color: lightblue;}.in2{    float: left;    margin-left: 100px;    display: inline;    width: 100px;    height: 100px;    background-color: pink;    }</style></head><body><ul class="list">    <li class="in1">定位元素</li>    <li class="in2">浮动元素</li></ul></body>    </html>
ログイン後にコピー

　　【3】在IE6-浏览器下绝对定位元素的父级元素的宽度为奇数时，元素的right会有1px的偏差；高度为奇数时，元素的bottom会有1px的偏差

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    position: relative;    background-color: black;    width: 199px;    height: 199px;}.in{    position: absolute;    right: 0;    bottom: 0;    width: 100px;    height: 100px;    background-color: lightblue;}</style></head><body><ul class="list">    <li class="in">定位元素</li></ul></body>    </html>
ログイン後にコピー

表单bug

　　【1】IE6-浏览器下label标签只支持for属性，不支持仅仅包含的写法
　　【解决】使用for属性

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><label><input type="checkbox">label测试文字</label></body>    </html>
ログイン後にコピー

　　【2】(input空隙问题)当input元素被div包围时，IE6-浏览器下它们之间上下会各多出1px的空隙；而IE7、8浏览器下它们之间的上边会多出1px的空隙
　　【解决】给input加浮动

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}input{    margin: 0;    padding: 0;    border: none;}.box{    width: 202px;    height: 32px;    border: 1px solid black;    background-color: red;}.ipt{    width: 200px;    height: 30px;    border: 1px solid #ccc;}</style></head><body><div class="box">    <input class="ipt"></div></body>    </html>
ログイン後にコピー

　　【3】IE6-浏览器下当input元素被div包围时，在已经给input设置浮动的情况下，设置border:none无法得到理想效果
　　【解决】
　　　　[1]设置border:0
　　　　[2]重置input的背景

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}input{    margin: 0;    padding: 0;    border: none;}.box{    width: 201px;    height: 31px;    border: 1px solid black;    background-color: red;}.ipt{    width: 200px;    height: 30px;    border: none;    float: left;}</style></head><body><div class="box">    <input class="ipt"></div></body>    </html>
ログイン後にコピー

　　【4】IE7-浏览器下输入类型表单控件如