CSS の互換性問題の整理_html/css_WEB-ITnose
1.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。
2.ff下容器高度限定.即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。
3. 横向上的内容撑破容器问题。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。
4.浮动的清除，ff下必须清除浮动clear:both。
5. double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案，给浮动容器定义display:inline。
6.margin bug.当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件。解决方案：外层元素设定border 或设定float。
7.吞吃现象.还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。
8.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“ picRotate start ”方法写注释。
9.img下的留白，大家看这段代码有啥问题：
把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，给img设定 display:block可以解决。
10去line-height。
11 個のリンクのホバー ステータス。 a:hover img{width:300px} マウスをホバーしたときにリンクに含まれる画像の幅を変更したいのですが、残念ながら、ie6 では無効で、ie7 と ff では有効です。
12 個のリンクのホバー ステータス。 div:hover{} このスタイルは IE6 では認識されず、IE7 と FF でのみ機能します。
13blocked リンクには絶対レイヤーがあり、IMG はその絶対レイヤー内に配置されます。IE ではマウスで画像をクリックしてもリンク効果はありませんが、FF では正常に動作します。
完全にクリアできないフロート14個。解決策: ul 属性にzoom:1を追加します(liにzoom:1を追加しても意味がありません)
15ie以下では、その下の絶対レイヤーposition:absoluteまたは相対レイヤーposition:relativeに対してoverflow:hiddenは無効です。解決策: Position:relative または Position:absolute を overflow:hidden に追加します。さらに、ie6 は overflow-x または overflow-y 機能をサポートしますが、ie7 と ff はサポートしません。
16. IE6 には重大なバグがあります。float 要素に幅が定義されておらず、内部に高さまたはズーム 1 を定義する div がある場合、幅を指定しても div が行全体を埋めてしまいます。 float 要素をレイアウトまたは複雑なコンテナとして使用する場合は、幅を指定する必要があります。
17． IE6 のバグ。絶対的に配置された div に相対的に配置された div が含まれる。内層の相対的に配置された div の高さに特定の値が指定されている場合、内層の相対層の幅の値は 100% になります。外層の絶対層が引き伸ばされます。解決策は、内側の層にその層に対して float プロパティを与えることです。
18． IEのバグで、
に19. FFのデメリット。 width:100% は、IE で使用すると非常に便利です。これにより、浮動レイヤーの影響を無視して、レイヤーごとに幅の値を検索できます。中央のすべての浮遊レイヤーに width: 100% を追加するだけです。疲れます。
20． iE6の問題。レイヤーの高さが 20px 未満の場合、IE6 では font-size を 0px に定義する必要があります。それ以外の場合、高さは 20px です。 ff では、body と html のみが同時に height:100% を定義しており、高さは 100% になります。 IE では、body を定義するだけで済みます。
22. div の垂直方向の中央揃えの問題:
vertical-align:middle; 行間隔を DIV 全体と同じ高さに増やします。 line-height:200px; 次にテキストを挿入すると、垂直方向の中央揃えになります。欠点は、行の折り返しではなくコンテンツを制御する必要があることです。
23. IEのかくれんぼ問題
divアプリケーションが複雑で各列にいくつかのリンクがある場合、この時にDIVのかくれんぼ問題が発生しやすくなります。
一部のコンテンツは表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。解決策: #layout に line-height 属性を使用するか、#layout に固定の高さと幅を使用します。ページ構造はできるだけシンプルにしてください。
24. Web標準により、IEではスクロールバーの色を設定することができません
解決策は本文をhtmlに置き換えることです
25．リンクの境界線と背景 (タグ)
リンクと境界線と背景色、表示を設定する必要があります: block,
26..ul タグには、ff ではデフォルトでパディング値がありますが、IE ではマージンのみが値を持ちます
最初に ul{margin:0;padding:0;} を定義すると、ほとんどの問題を解決できます
27.ff: margin-left と margin-right を auto に設定すると div はすでに中央に配置されますが、IE は機能しません
ff: body text-align を設定する場合、div を margin: auto (主に margin-left、margin-right) で中央揃えに設定する必要があります
28. Tu 画像は中央に配置され、テキストは左に配置されます。
.abc{ text-align:left }
abc img{ display:block ; text-align:center;margin:o auto; }
29. レイヤーの垂直方向の中央揃えのスタイル:
div{
位置: 絶対;
上:50%;
左:50%;マージン:-117px 0 0 -187px;
幅:374px;
高さ:234px;
背景画像:url(images/beijing .jpg );
}
30.form は、IE6 では下部に余分な行があり、さらに style="padding:0; margin:0;"
32 が追加されます。空の td には、ボーダー テーブル { border-collapse:collapse; }
33 が表示されます。
function imagechange(img)
{
document.images[0].src= img;
document.images [0].width=400;
document.images[0].height=300;
}
