【超便利】IE6、IE7のCSS設定におけるDIVの配置の問題 (転送)_html/css

具体的也说不清楚，可是能浮动的问题，也可能是你给了填充边界的问题。

下面是14条特殊情况你看一下是哪个问题出错了这些仅供参考：

1. 文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。

2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。

3.横向上的撑破容器问题，。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。

小实验：有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。

a. b.

c. d.

上面的代码在不同浏览器中是不一样的，实验起源于对小height 值div 的运用， ，小height 值要配合overflow:hidden一起使用。实验好玩而已，想说明的是，浏览器对容器的边界解释是大不相同的，容器内容的影响结果各不相同。

4.最被痛恨的，double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案，给浮动容器定义display:inline。

5.mirror margin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。 padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或 设定float。

引申：ff 和ie 下对容器的margin-bottom，padding-bottom的解释有时不一致，似乎与之相关。

6. 吞吃现象。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。

7.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“ picRotate start ”方法写注释。

8.img 下的留白，大家看这段代码有啥问题：

把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写

后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定 display:block。

9. 失去line-height。 文字 ，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是 这个inline-block元素和inline元素写在一起了。解决方案：让img 和文字都 float起来。

引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意。索性让img 和文字都 float起来，用margin 调整。

10.clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效 dd ff

11.ie overflow:hidden では、絶対レイヤー位置:absolute または相対レイヤー位置:relative は無効です。解決策: 位置: 相対または位置: 絶対を overflow:hidden に追加します。さらに、ie6 は overflow-x または overflow-y 機能をサポートしますが、ie7 と ff はサポートしません。

12.ie6 での深刻なバグ。float 要素に幅が定義されておらず、中に高さまたはzoom:1を定義するdivがある場合、幅を指定したとしてもdivが行全体を埋めてしまいます。 float 要素をレイアウトまたは複雑なコンテナとして使用する場合は、幅を指定する必要があります。

13.ie6 のバグ。絶対位置の div に相対位置の div が含まれている場合、内層の相対位置の div に特定の高さの値を与えると、内層の相対層の幅の値が 100% になります。 、外側のレイヤーの絶対レイヤーの幅の値は 100% になります。解決策は、内側の層にその層に対して float プロパティを与えることです。

14.width:100% これは IE で使用すると非常に便利です。フローティング レイヤーの影響を無視して、幅の値をレイヤーごとに上方向に検索し、フローティング レイヤーの最後まで検索します。この方法では、すべてのフローティングレイヤーを中央に追加することしかできません。幅:100% で十分です。面倒です。 Opera はこれをよく学び、ie に従いました。

------------------------------------------------ -------------------------------------------------- ---------------

Ie のフロート バグ (IE6、IE7) はフロントエンド エンジニアを悩ませています。最も一般的な現象は、フローティング要素の親要素がドラッグされたときです。この問題の解決策は、フローティング要素をレイアウトすることです

多くの場合、ページは自由にスケーラブルである必要があるため、幅を固定値として宣言することはできませんが、 * height:1%; を設定できます。 , * はここで非常に重要です。* は ie7 以下でのみ解析でき、ie8 はこのタイプの書き込みを認識しないため、この書き込み方法を使用して ie8 を他のバージョンの IE ブラウザと区別できます。 はい 人気の ie8 beta1。インターネット上のハックも補足とみなすことができます

よく使われるハックテスト

* html p {color:red;} IE6 をサポート FF IE7 をサポートしません IE8b *+html p {color:red;} IE7 をサポートします。 IE8b は FF をサポートしません IE6 p {*color:red;} は IE7 をサポートします IE6 は FF をサポートしません IE8b

IE8 は CSS3 に部分文字列一致属性セレクターを追加し、特定のルールと規則性が含まれています 一致は非常に似ています:

E [att^='val'] //部分文字列は 'val' で始まります E[att$='val'] //部分文字列は 'val' で終わります E[att*= 'val'] //部分文字列'val' が含まれます

IE8 は、ほとんどの基本的な CSS2.1 セレクターをサポートします。サポートされていないセレクターには、[:first-line] および [:first-letter] が含まれますが、これらに限定されません。 CSS2.1 で生成されるコンテンツ部分、つまり、疑似要素 :before および :after を使用してテキスト コンテンツを追加する場合、IE8 ではサポートが完了していません。 他のほとんどのブラウザでサポートされている不透明度と RGBA については、IE8 ではまだサポートされていません。 元々 IE を区別するために使用されていた HACK は、IE8 では基本的に無効です (*property:value、*property:value など)。 IE の元のリスト項目の空白バグは IE8 にもまだ存在します。 元の IE z-index のバグは IE8 にもまだ存在します。 IE8 で新たなバグが発生しました。line-height が通常の値より小さい場合、余分な部分がトリミングされてしまいます。 display:table は IE8 ではまだサポートされていません。 枠線の透明値は IE8 ではまだサポートされていません。 IE8 では、@import は 3 レベルのネストのみをサポートします。 IE8 の透明な境界線はサポートされていません IE8 で新しいバグが生成されます: line-heigth BUG IE8 のみのハック。属性またはクラスにすることができます

---------------- -------------------------------------------------------- -------------- ----------------------------

バグの説明:

Aページ上の特定の DIV は、position:relative を使用し、top=-25px などと組み合わせて使用します。要素の位置決め。 FF および IE7 では正常に動作しますが、IE6 ではマウスのスクロールに合わせて DIV もスクロールします。

分析:

これは IE6 の既知のバグです。position:relative 要素が overflow:auto/scroll 属性を持つブロックレベルの要素に含まれている場合、position:absolute の動作を示します。

解決策:

1. 属性を追加します。position:relative を、それを含むブロック要素に追加します。

2. 要素のposition:relative属性を削除し、デフォルトの静的配置を使用し、margin-topなどの属性を使用して同様の効果を実現します。

????????????????????????????????????????????? ?????????????

IE6 の終わりが近づいています。これは間違いなく私たちフロントエンド開発者にとって慰めとなるニュースですが、この終わりは明日達成できるものではありません。私たちは依然として最終的な勝利を目指して努力しており、IE6 の二重余白、透明な背景、テキストの繰り返しなどの多くのバグを回避するためにさまざまなハックや方法を使用しています。 以下は、Front-end Observation から再現された 10 のバグです (www からの翻訳)。 .sitepoint.com) IE6 のバグを修正するためのヒント: 1. DOCTYPE を使用する 各 HTML ファイルの先頭で常に DOCTYPE を使用する必要があり、次のような厳密なバージョンを使用することをお勧めします:

または、XHTML の場合は次を使用します:

必要です対処するのが最も難しいのは、IE6 が quirks モードになることです。これは十分に奇妙です。 2. 位置:相対を設定します 要素を「位置:相対」に設定すると、特に隠れたボックスや奇妙に配置されたボックスが発生した場合に、多くの問題を解決できます。結果として、絶対に配置された子ノードが再配置される可能性があるため、十分に注意する必要があることは明らかです。 3. フローティング要素を display:inline に設定します margin 属性を持つフローティング要素は、有名な IE6 の二重マージンの問題を引き起こす可能性があります。たとえば、要素に 5px の margin-left を指定しても、IE6 では実際には 10px として表示されます。 「display:inline」はこの問題を解決します。必須ではありませんが、CSS は引き続き有効です。 4. 要素を hasLayout に設定する IE6 (および IE7) のレンダリングの問題の多くは、要素の hasLayout を設定することで解決できます。これは IE の内部プロパティ (IE によって隠されています。haslayout の詳細については、こちらを参照してください) であり、他の要素に対してコンテンツがどのようにレイアウトされ、配置されるかを決定するために使用されます。インライン要素 (リンクなど) をブロック要素にする必要がある場合、または透明効果を適用する必要がある場合にも、hasLayout の設定が必要になる場合があります。 hasLayout を設定する最も簡単な方法は、CSS の高さまたは幅を設定することです (ズームも使用できますが、ズームは CSS 標準の一部ではありません)。実際のサイズを設定することをお勧めしますが、問題は、これは非現実的であり、「height:1%」を使用する必要がある場合があることです。親要素で高さが設定されていない場合、要素の実際の高さは影響を受けず、この時点では hasLayout が有効になります。 5. 重複テキストのバグを修正 複雑なレイアウトでは、フローティング要素の末尾にある一部の文字がクリア要素の下に表示されるバグが発生する可能性があります。いくつかの回避策があり、いくつかは完璧ですが、いくつかの試行錯誤が必要です: すべての要素で「display:inline;」を使用するようにしてください。最後の要素で「margin-right:-3px」を使用してください。 " 。次のように、フローティング要素の最後の項目に条件付きコメントを使用します:

ここにコメントを入力します... .コンテナの最後の要素で空の div を使用します (幅を 90% などに設定することも必要です。 >>>>>> また、positioniseverything.net にアクセスして、この質問の完全版を表示する はじめに 6. クリック可能な要素とホバー可能な要素では タグのみを使用します IE6 は、JavaScript ベースのコンポーネント内で制御するためにも使用できます。キーボードの操作性。代替手段はいくつかありますが、 タグは他のものよりも信頼性が高くなります 7. IE6 を区別するには、条件付き CSS メソッドを使用する必要があります。たとえば、次のコードで最小の高さを定義できます。 min-height: 20em; height: auto ! height: 20em;

#element[ id] { height: auto; }

8. パーセント単位を避ける 各親要素のサイズを正確に制御できない限り、パーセントは IE を混乱させます。可能な限り最善の防止を達成するには、他のブラウザでもパーセントを使用し続けることができます。 ! important を使用して、次のようにします。

body {

margin: 2% 0 ! important; margin: 20px 0; }

9. できるだけ早くテストし、テストを継続してください ウェブサイトやアプリが完成するまで待ってはいけませんIE6 のテストが完了しました。問題が悪化する可能性があり、修正にはさらに時間がかかります。Web サイトが Firefox と IE6 で正常に動作する場合、ブラウザは通常問題なく動作します。コード よくあるのは、HTML といくつかの単純な CSS を少し変更してレイアウトの問題を再考するよりも、バグの修正に時間がかかることです。これにより、完璧なコードを放棄することになる可能性がありますが、長期的な問題は少なくなります。そうすれば、将来的にそれらにどう対処するかについてより良いアイデアが得られるでしょう

---------------------。 -------------------------------------- ------- --------------------------------------------------------

IE6 で PNG 形式をサポートさせましょう画像

使用法:

まずメモ帳に次のコードをコピーし、pngbehavior.htc として保存します (名前は任意です):

var サポート = /MSIE ((5.5)|[6789])/.test(navigator.userAgent) && navigator .platform = = "Win32";

var realSrc; varblankSrc = "blank.gif"; var isPrinting = false;

if (サポートされている) fixImage();

function propertyChanged() { if (!supported || isPrinting) return;

var pName =event.propertyName; if (pName != "src") return; // 空白に設定されていない場合 if (!new RegExp(blankSrc).test(src)) fixImage(); };

function fixImage() { // get src var src = element.src;

// 実際の変更をチェック if (src == realSrc && /.png$/i.test(src)) { element.src =blankSrc; return; }

if ( ! new RegExp(blankSrc).test(src)) { // 古い src realSrc = src; }

// png のテスト if (/.png$/i.test(realSrc)) { // 空白の画像を設定 element.src =blankSrc; // フィルター element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." を設定します。 + "AlphaImageLoader(src='" + src + "',sizingMethod='scale')"; } else { // filter element.runtimeStyle.filter = ""; } }

function beforePrint() { isPrinting = true; element.src = realSrc; element.runtimeStyle.filter = ""; realSrc = null; }

関数 afterPrint() { isPrinting = false; fixImage(); }

最終在你的css文件里面加上这么一段代码：

img {behavior: url("pngbehavior.htc");}