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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:36 AM

幅と高さのバグ

【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ブラウザの場合タグに含まれる IE ブラウザーでの一般的な CSS 互換性の問題_html/css_WEB-ITnose 要素でボーダーを生成します

【解決策】{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="/static/imghwm/default1.png"  data-src="#"  class="lazy" alt="IE ブラウザーでの一般的な CSS 互換性の問題_html/css_WEB-ITnose" ></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="max-width:90%">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-浏览器下输入类型表单控件如、<input>等输入文字时，背景图像会跟着文字一起滚动<br> 　　【解决】把背景加给父级，并清掉自身背景

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}.test{    overflow: auto;    background: url(img/bg.jpg) no-repeat;    font-size: 50px;    line-height: 60px;    height: 200px;    width: 500px;}</style></head><body><textarea class="test"></textarea></body>    </html>

　　【5】IE6-浏览器中select控件无法被

覆盖，因为在IE6中select控件是处于最顶层的。
　　【解决】iframe比select优先级高，把iframe嵌套在

里面，并设置为不可见

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>input{    width: 100px;    height: 100px;    background-color: lightgreen;}.box{    width: 200px;    height: 200px;    position: absolute;    top: 20px;    left: 20px;    background-color: pink;}</style></head><body><select class="select">    <option>test1</option>    <option>test2</option>    <option>test3</option></select><div class="box" id="box"><iframe style="width:50px; height:50px;border: 0; position: absolute; opacity = 0; filter:alpha(opacity=0)"></iframe></div></body>    </html>

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

See all articles

ホットAIツール

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、