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。

、残念ながら、IE6 では単一行テキストの行高効果が消えてしまいます。 。 。理由は、この inline-block 要素と inline 要素が一緒に書かれているためです。解決策: img と text の両方をフロートにします。

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のバグで、

にがあると、position:relativeレイヤー以下のフロートレイヤーのテキストが選択できなくなります。このバグにより、共通スタイル ライブラリを修正する必要がありました。

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;

}

34.表单输入框默认文字的设置

function cleanUp(id){

    if(document.getElementById("userid").value == "请输入搜索关键字")

    {

        document.getElementById(id).value = "";

    }

}

35.透明兼容写法：

filter:alpha(opacity=70);-moz-opacity:0.7;

36 文字和图片在同一行垂直居中问题：

一个关键的属性: margin-bottom 通过修改图片的外边框的底部高度就可以让文字移动上来. 做法是把这个值设置为负数.例如我们把下面的16X15的图片设置它的style="margin-bottom:-3px" 这样文字和图片就居中了

兼容性一直都是个令人头痛的问题，下面简单总结火狐与IE的兼容性问题。

37. 超链接访问过后hover样式就不出现的问题 
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A 

1.   

38. FireFox下如何使连续长字段自动换行 
众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入的方法来解决 

1.   

10.

 

 Js代码

1.            

2.      /* 

3. function toBreakWord(el, intLen){

4. var ōbj=document.getElementById(el);

5. var strContent=obj.innerHTML;

6. var strTemp="";

7. while(strContent.length>intLen){      

8.                  strTemp+=strContent.substr(0,intLen)+"      

9.  ";  

10.                strContent=strContent.substr(intLen,strContent.length);        

11.            }  

12.            strTemp+="  

13."+strContent;  

14.            obj.innerHTML=strTemp;      

15.        }      

16.        if(document.getElementById  &&  !document.all)  toBreakWord("ff", 37);      

17.    /* ]]> */     

18.     

 

39.ff下为什么父容器的高度不能自适应 
在子容器加了浮动属性后,该容器将不能自动撑开,解决方法是在标签结束后加上一个清除浮动的元素。 

1.  clear:both; 

2.  样式中加入

.clearfix:after {content:"."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display:inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

然后在有浮动的层的外边加入这个clearfix的样式，如下：

40. IE6 の二重マージンのバグ
フローティング後、元のマージンは 10 ピクセルですが、IE はそれを 20 ピクセルとして解釈します。

1 を IE6 の下に絶対配置することはできません。通常通り選択してください

この問題は IE6 と 7 に存在します。この問題の解決策は、IE を qurks モードにすることです。 qurks モードに関する関連知識については、次を参照してください:

http://www.microsoft.com/..

42 IE6 では画像の下に隙間があります

このバグを解決する方法はたくさんあります。 HTMLのレイアウトを変更するか、imgをdisplay:block

に設定するか、vertical-align属性をvertical-align:topbottommiddletext-bottomに設定することで解決できます

43.下の2つのレイヤーの間に隙間があります。 IE6

この IE の 3PX バグもよく発生します。 はい、解決策は、.right を float:left にするか、IE6 を基準にして .left margin-right:-3px を定義することです。

44 list-style-image の位置決めの問題もよく尋ねられますが、解決策は通常 li の背景シミュレーションを使用することですが、ここでは相対位置決め方法を使用して問題を解決することもできます。

45. LI のコンテンツが長さを超えた後に省略記号を表示する方法
この方法は、IE および OP ブラウザに適しています

2. -

4.

5. テキスト-オーバーフロー:省略記号; 8 .

、違いはありますか?

1. Web 標準では、重複する ID は許可されません。たとえば、div id="aa" を 2 回繰り返すことは許可されず、class は理論的には無限に繰り返すことができるクラスを定義します。

2. 属性の優先順位の問題

ID はクラスよりも優先されます。必要に応じて、上記の例を参照してください。

3.ページ内のオブジェクトに対してスクリプト操作を実行するには、その ID を定義できます。そうでない場合は、ページ要素を走査して特定の属性を指定するだけで ID を見つけることができます。これは比較的時間とリソースの無駄であり、それほど単純ではありません。

47. テキストを垂直方向に中央揃えにする方法

要素の高さと行の高さを一致させるように設定します。

1.  

50.FF下文本无法撑开容器的高度 
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义: 

1.  {  

2.     height:auto!important;  

3.     height:200px;  

4.     min-height:200px;  

5.   } 

51.IE6下容器的宽度和FF解释不同呢 

1.   

2.   

3.   

4.       

14.

 

问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考: 
http://www.microsoft.com/..

52.    为什么web标准中IE无法设置滚动条颜色了
解决办法是将body换成html 

1.   

2.   

3.   

53.    为什么我定义的样式没有作用呢 
这里你无法用.aa定义到li 遇到这种情况怎么解决呢？答案是提高.aa 的优先权 比如#aa ul li.aa 

1.   

2.   

3.        

13.

 

54.  IE6无法定义1px左右高度的容器 
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:

1.  overflow:hidden zoom:0.08 line-height:1px 

55.    背景颜色无法显示 

1.   

2.   

3.   

14.    

19.

 

20.

• web标准常见问题大全
 

21.

• web标准常见问题大全
 

22.

• web标准常见问题大全
 

23.

• web标准常见问题大全
 

24.

• web标准常见问题大全
 

25.

26.

IE で背景色を設定した UL が表示されない。これは、http://www.satzansatz.de/cssd/ を参照してください。 onhavinglayout
解決策の 1 つ: 解決策は次のとおりです。 FLASH に透明度を設定します

1.

57. ブラウザ内でレイヤーを垂直方向に中央に配置する方法

ここでは、外側のパッチを使用してパーセント絶対位置を使用します。負の値の方法。負の値のサイズは、独自の幅と高さを 2 で割ったものです

2. .上:50%;

7.幅:200px;画像コンテナに対して垂直です

1.

2. & lt; style type = "text/css" & gt;

3. & lt;!-

4.*{マージン: 0; パディング: 0}

.

7 .

11. 表示: テーブルセル;

15.div p {
16.静的

17. +位置:絶対値

19. }

21. +位置:相対; -50%;左:-5 0%
幅: 276px;

25.        height:110px  

26.    }  

27.--> 

28. 

29.

 

59.或者使用背景图的办法: 

1.  background:url("logo.gif") center no-repeat; 

 

60.    如何让div横向排列
横向排列DIV可以使用浮动的方式比如float:left,或者设置对象为内联,还可以绝对定位对象等等. 

1.        

2.        

3.   

13.

 

14.

 

15.

 

61.Firefox 关于DIV高度无法自适应的两种解决
如果设置了一个DIV的高度，当DIV里实际内容大于所设高度，ie会自动拉伸以适应DIV容器大小，ff会固定DIV的高度，超过部分超出DIV底线以外，
出现和下面的内容重叠的现象。如果不给DIV设置高度，在Firefox中将不回因为里面的内容而撑开，而IE中就会自动根据内容撑开
解决方案：
第一种方法：在DIV内部的最后追加clear:both样式

1.  

 

第二种方法：对DIV使用overflow:auto；

1.  

62. IE 互換の画像の背景を透明にする方法:

最初の方法: 画像形式を png8 として定義し、正確に設定し、ジッター 100% にする

2 番目の方法: js (js ソース コード)内容は以下の通りですが、画像はページ数が多すぎるため推奨しません)

第3 つの方法: フィルタを利用する(注意が必要です、背景と *html 内の src クリエーション図のルートパスは URL である必要があります。また、クラス名には、ul li.class などの形式を含めることはできません。{}このような書き込み法は実行されません) ）

.imgbg{position:absolute;left:0;top:0;background:url(http://icon.cnmo-img.com.cn/app/ie6_img_app_11.png) no-repeat;width: 60px;高さ:60px;z-index:1;zoom:1;cursor:pointer;}

*html .imgbg{background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src='http://icon.cnmo-img.com.cn/app/ie6_img_app_11.png');}