【Webフロントエンド開発】ブラウザ互換処理事典_html/css

1. センタリングの問題

IE ではデフォルトで div 内のコンテンツが中央揃えになり、コードマージンを追加してみることができます: 0 auto;

2. 高さの問題
2 つ。上下に配置された div またはネストされた div では、div 内の実際のコンテンツが設定された高さよりも大きい場合、2 つの div はオーバーラップしますが、IE では、下の div が自動的に設定されます。したがって、レイヤーの重なりを避けるために、高さを適切に制御するか、単純に高さを書き込まずに自動的に調整する必要があります。この div のレベル要素は float であるため、 div ブロックの最後と閉じて閉じる前に、底がくぼんだ空の div を追加する必要があります。対応する CSS は次のとおりです。 .float_bottom {clear:both;height:0px;font- size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3. clear:both;

float の影響を受けたくない場合は、 div に clear:both;
を書き込みます 4. IE の float マージンによる Double distance

#box {
float:left;
width:100px;
margin:0 0 0 100px; // この場合、IE 200px の距離が生成されます
display:inline; // float を無視します
}

5. パディングの問題

FF でパディングを設定すると、div は高さと幅を増加させますが、IE は増加しません (* 標準の XHTML1.0定義 dtd は一貫しているようです) 高さを適切に制御するか、height:100%; width パディングの使用を減らしてみますが、実際の経験に基づくと、一般に FF と IE のパディングは実際にはそれほど変わりません。 div の幅 = 幅 + パディングなので、div は幅で埋められ、幅は実際に必要な幅からパディングを引いた値で定義されます。

6. div がネストされている場合の y 軸のパディングとマーラインの問題

FF では、y 軸上の子 div から親 div までの距離は親のパディング + 子のマーラインです
IE では、 y軸の子divから親divまでの距離は、親のpaddingと子のmarginの大きい方
FFでy軸の親のpadding=0、border=0のとき、子divから親divまでの距離親 div は 0 で、子の margin は親 div の外側で動作します

7. パディング、マージン、高さ、幅に対する確実な解決策です

これはメソッドではなくスキルであることに注意してください:
標準ヘッダーを記述します。まあ

< ;html xmlns=”http://www.w3.org/1999/xhtml”>
可能な限りパディングを使用し、マージンを慎重に使用してください。親の高さが固定されている場合は、高さを 100% で埋めるようにしてください。値を変更する場合、子の高さは 100% である必要はありません。子がすべて浮動している場合は、下の空のスペースを埋めます。実際の幅は、可能な限り余白を使用する必要があります。パディングを減算します

8. リストクラス

1. FF ではデフォルトで ul タグにパディング値がありますが、IE ではマージンのみが値を持ちます
まず ul {margin:0;padding:0;} を定義します。 2 . ul および ol リストのインデントの問題。ul、ol およびその他のリストのインデントを削除する場合、スタイルは次のように記述する必要があります: {list-style:none;margin:0px;padding:0px;}

9. class (display:block, inline)

1. 2 つの要素、display:block と inline
display:block; // インライン要素をブロック要素としてシミュレートできます
display:inline; // 同じように配置された効果を実現します。 row
display:table; / /FF では、table
display:block ブロック要素の効果をシミュレートします。要素の特性は次のとおりです:
常に新しい行で始まり、行の高さと上下の余白を制御できます。 ; 幅を設定しない限り、デフォルトの幅はコンテナの 100% になります

、

はブロック要素の例です。 display:inline は次のようになります。要素はインライン要素として表示されます。要素の高さ、行の高さ、上下の余白は変更できません。テキストまたは画像の変更はできません。
、、、、、は、マウスの指のような表示の例です
2.標準カーソルの書き方: pointer;

10. 背景、画像クラス
1. 背景の表示の問題
width 属性と height 属性を完了することに注意してください
2. 背景の透明度の問題
IE: filter: progid: DXImageTransform。 Microsoft.Alpha(style =0,opacity=60);
IE: filter: alpha(opacity=10);
FF: opacity:0.6;
FF: -moz-opacity:0.10;
との両方を記述するのが最善です以下に opacity 属性を置きます

11. min-height の最小高さの実装 (IE6、IE7、FF と互換性があります)

機能は次のとおりです: コンテナーの内容が小さい場合、コンテナーの破壊を避けるために最小の高さを維持できます。レイアウトまたは UI デザイン効果。コンテナ内のコンテンツが増加すると、コンテンツの変化に合わせてコンテナが自動的に伸縮します。
#mrjin {
background:#ccc;
min-height:100px;
height:auto ! important;
height:100px;
overflow:visible;
}

12. 有名なマイヤーリセット

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6，p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

13、跨浏览器的CSS透明度

.transparent {
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;

14、文字阴影（CSS3）

.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }

15、Box阴影(CSS3)

.box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }

16、Sticky Footer (让页脚永远停靠在页面底部，而不是根据绝对位置)

CSS:
* { margin:0; パディング:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto-height: 100%;} #main { パディングボトム: 150px; }
#footer {
位置: 相対;
マージントップ: -150px;
.clearfix:after {コンテンツ: ".";
表示: ブロック;
高さ: 0;
クリア: 両方;
可視性: 非表示;}
.clearfix {表示: インラインブロック;}
* html .clearfix { 高さ: 1%;}
.clearfix {表示: block;}

17. iframe 要素から継承された html と本文の背景色/背景画像を削除するにはどうすればよいですか? iframe 要素の機能は、ドキュメントにドキュメントを埋め込み、フローティングフレームを作成することです。埋め込みドキュメントは、HTML、BODY、その他の属性を備えた完全なページです。ここで問題が発生します。スタイルシートの BODY に背景色/背景画像が定義されている場合、埋め込まれたドキュメントはすべてそれを継承します。では、背景色と背景画像を削除する方法:
【1】背景色を削除: filter:Chroma(Color=white);
例:
【2】背景画像を削除します:
例:
注: 埋め込まれたページには BODY 属性も追加する必要があります:

18. IE ブラウザのスクロールバーの色を Web 標準で設定できないのはなぜですか?

元のスタイル設定:

解決策は、ボディを置き換えることです。 htmlで。

19. Firefox のテキストはコンテナの高さを拡張できないのはなぜですか?

標準ブラウザで高さの値が固定されているコンテナは、IE6 のように引き伸ばされません。では、高さを固定して引き伸ばしたい場合はどうすればよいでしょうか。方法は、高さを削除して min-height:200px; を設定することです。min-height を認識しない IE6 を処理するには、次のように定義します。 200px; min-height:200px; }

20. 高さ約 1px のコンテナを定義するには?

IE6 でのこの問題は、デフォルトの行の高さが原因で発生します。次のような解決策があります。

解決策は、FLASH の透明度を設定することです:
:

22. ブラウザーで div レイヤーを中央に配置するにはどうすればよいですか?

23. divの背景を透明にする方法は？

まず第一に、これら 2 つのレイヤーは兄弟である必要があります。次に、これら 2 つのレイヤーは絶対に配置される必要があります。例:

Colinivy の世界

这里很多的文字,这里很多的文字,这里很多的文字,这里很多的文字,

BlueIdea,BlueIdea,BlueIdea

24、怎样去掉选中时的虚线框？

利用onfocus="this.blur();"例如：测试

25、ie6下png背景显示问题？

针对ie6下png背景显示问题,CSS中可以这样解决:_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’http://www.0351zhuangxiu.com/uploads/images/bj.jpg’);

26、文字与表单对齐方法？

设置表单元素第一字体为Tahoma(Verdana系列也可),并设置vertical-align:middle.建设大家把这个约定写入CSS RESET中,能减小很多麻烦:
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle}

27、optgroup标签的用法？

optgroup标签,鲜为人知,它对提升选择表单用户体验很有帮助。就是可以在有很多选项时,对这些选项分组：例子：

28、文字与图片垂直居中对齐方法？

为图片与文字的共同父元素所有的后代元素定义*{vertical-align:middle};例如:
我要的坚强

只需定义p*{vertical-align:middle}即可使文字与图片同行垂直居中.

29、文章标题列表中日期居右显示的两种方法？

方法A相对方法B省资源,但比方法B要多写两句代码,使用时请视情况而定:
方法A：

这是文章标题2010-10-10

然后定义p和span的样式：
p{ position:relative}
p span{ position:absolute; right:0}
方法B:
2010-10-10这是文章标题

然后定义span右浮动:
p span{float:right}

30、ie6下max/min-width/height实现？

ie6下max/min-width/height实现,_width: expression_r(this.width >600 ? “600px” : true);,height同理.

31、空白外边距互相叠加的问题？

一般通过添加透明边框或者1px的内边距避免；
其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid transparent;
其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px；
例如：

空白边距叠加demo@Mr.Think

空白边距叠加demo@Mr.Think

32. Web デザインのデフォルトフォント

font: 12px/1.5 Tahoma、Helvetica、Arial、sans-serif;
注: line-height は 1.5 を使用します。 18 ピクセル。これは、淘宝網のビジュアル仕様で定義されている行の高さです。12 ピクセルのフォントの場合、この行の高さは非常に快適に見えます。フォントファミリのデフォルトは Tahoma です。Tahoma は、英語の Windows オペレーティングシステムのデフォルトフォントであり、中国語と英語がうまく組み合わされて表示されます。

33. ブラウザ対応??よく使われるCSSハック

(1).title{ height:200px;
*height:200px;
_height:200px }
(2).title{ height:200px;
* height :200px !重要;
*高さ:200px; }
（3）.title{ 高さ:200px; }
*html.title{ 高さ:200px;}

【Webフロントエンド開発】ブラウザ互換処理事典_html/css_WEB-ITnose