ホームページ > 記事 > ウェブフロントエンド > div+CSS ブラウザの互換性問題の整理_html/css_WEB-ITnose
div+CSS ブラウザの互換性問題の整理_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:30:561013ブラウズ
CSS技巧
1.div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 powered by 25175.net
2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 例如： <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}
3.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;
4 IE与宽度和高度的问题
IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两 个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样： #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
5.页面的最小宽度 min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当 做最小宽度来使。为了让这一命令在IE上也能用，可以把一个
6.DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键}
7.IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
8.float的div闭合;清除浮动;自适应高度;
① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;) 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签 闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会 产生异常。 并且将clear这种样式定义为为如下即可： .clear{ clear:both;}
②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。 例如某一个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:
④万能float 闭合(非常重要!) 关 于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下 代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽. /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ 或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}
11.高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。 例： #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
p对象中的内容
12. IE6 で画像の下に隙間があるのはなぜですか? このバグを解決するには、HTML のレイアウトを変更するか、img を display:block に設定するか、vertical-align 属性を設定することができます。 align:top |bottom |middle |text-bottom を解決できます。
テキストとテキスト入力ボックスを配置する方法
vertical-align:middle; を追加します。 - input { width:200px; height:30px; border:1px、vertical-align:middle; } --> 14. . Web 標準 ID では重複が許可されておらず、例えば div id="aa" は 2 回繰り返すことができず、class は理論的には無限に繰り返し可能なクラスを定義するため、複数の参照が必要な定義で使用できます。
2. 属性 ID の優先度の問題 クラスの優先度はクラスよりも高くなります。
3. ページ内のオブジェクトに対してスクリプト操作を実行する場合に便利です。それ以外の場合、特定の属性を指定して検索することは、比較的時間とリソースの無駄であり、省略記号を表示する方法よりもはるかに簡単ではありません。 LI のコンテンツが長さを超えた後
この方法は IE および OP ブラウザに適しています
高さ約 1px のコンテナを定義します
IE6 でのこの問題は、デフォルトの行の高さが原因で発生します。 line-height:1px
18. FLASHの上にレイヤーを表示させる方法
解決策は、FLASHの透明度を設定することです
19.ブラウザ内のレイヤー
ここでは、負の値を外部からパッチする方法を使用して、パーセント絶対位置を使用します。負の値のサイズは、独自の幅と高さを 2 で割ったものです
FF と IE
1. 25175.net による div のセンタリングの問題
margin-left と margin-right が auto に設定されている場合、div はすでにセンタリングされていますが、IE は body をセンタリングするように設定する必要はありません。まず、親要素で text-algin を定義します。これは、親要素内のコンテンツが中央に配置されることを意味します。
2. リンク（aタグ）の境界線と背景
リンクに境界線と背景色を追加するには、display: blockを設定し、改行がないようにfloat: leftを設定する必要があります。メニューバーに関して、a とメニューバーの高さを設定するのは、下端の表示がずれないようにするためです。高さを設定しない場合は、メニューバーにスペースを挿入できます。
3. ハイパーリンクにアクセスした後にホバースタイルが表示されない問題
クリックしてアクセスしたハイパーリンクスタイルにホバーが表示されなくなり、この問題を解決するには、CSS の順序を変更する必要があります。属性: L-V-H-A コード:
13.为什么IE6下容器的宽度和FF解释不同呢
问 题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的 问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、 standards mode的相关知识
powered by 25175.netIE6,IE7,FF
IE7.0 出来了，对CSS的支持又有新问题。浏览器多了，网页兼容性更差了，疲于奔命的还是我们 ，为解决IE7.0的兼容问题，找来了下面这篇文章： 现在我大 部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没 按要求显示！下面是三个浏览器的兼容性收集.
第一种，是CSS HACK的方法
height:20px; /*For Firefox*/ *height:25px; /*For IE7 & IE6*/ _height:20px; /*For IE6*/
注意顺序。
这样也属于CSS HACK，不过没有上面这样简洁。 #example { color: #333; } /* Moz */ * html #example { color: #666; } /* IE6 */ *+html #example { color: #999; } /* IE7 */
第二种，是使用IE专用的条件注释
第三种，css filter的办法，以下为经典从国外网站翻译过来的。.
新建一个css样式如下： #item { width: 200px; height: 200px; background: red; }
新建一个div,并使用前面定义的css的样式：
IE6 と FF との互換性については、前のものが重要であると考えてください。個人的には、シンプルで互換性が高い最初のものが好みです。
ブラウザ HACK とは: 別のブラウザ (Firefox IE7 IE6) を使用して、同じ Web サイトである場合、ページを読み込むときにいくつかの非互換性の問題が発生します。CSS を作成するときに非常にイライラすることがあります。その結果、別の問題が発生します。ブラウザ デバイスに新たな問題が発生しました。 HACK は、CSS 内でさまざまなブラウザをサポートするスタイルを個別に記述することができる方法です。今では調和が生まれています。ふふ！ powered by 25175.net
Microsoft が最近リリースした IE7 ブラウザの互換性は、確かに一部の Web ページ作成者にとって大きな負担となっています。IE7 は標準化されましたが、FF とはまだ多くの違いがあるため、IE7 は HACK を使用する必要があります。多くの友人が IE7 の HACK とは何なのかと尋ねましたが、私も実は知りません。 IE7 用の特定の HACK はまだ見つかりません。前回の記事に加えて、「CSS Style for Firefox IE6 IE7」のハック方法も非常に役立ちます。
少し論理的思考ができる人なら、IE と FF HACK を一緒に使用できることを知っているでしょう。たとえば、次の 3 つの HACK があります: (初心者に適しています。笑、専門家はここを通り過ぎています。)
プログラム コード
最初の HACK。 HACK 、IE FF はすべてのブラウザに共通です (実際には HACK ではありません) height:100px; 2 番目の HACK は IE6_height:100px に共通です
さて、これら 3 つの HACK を紹介しました。次に、スタイル内の各属性に対して IE6 IE7 FF 固有の HACK を定義する方法を見てみましょう。順序は間違っていません。
プログラム コード
height: 100px; *height: 120px; _height: 150px;
各ブラウザがこれら 3 つの属性をどのように理解するかを簡単に説明します。
FF では 2 番目と 3 番目の属性が認識されないため、IE7 では 3 番目の属性が読み取られます。 IE7 は Yes を認識しないため、最初と 2 番目の属性を読み取ります。2 番目の属性が最初の属性をカバーしているため、IE7 は最終的に 2 番目の属性 *height:120px を読み取ります
IE6 では、3 つの属性 IE6 はすべてお互いを認識しています。 3 つの属性はすべて読み取ることができ、3 番目の属性は最初の 2 つの属性を上書きするため、IE6 は最終的に 3 番目の属性を読み取ります。
Firefox ie6 ie7 用の 1 css スタイル
現在、ほとんどの場合、ハッキングに ! important が使用されています。ie6 および Firefox のテストでは、正常に表示できますが、ie7 では ! important が正しく解釈され、ページが表示されなくなります。必要に応じて表示されます！ 「*+html」を使用する IE7 用の優れたハックを見つけました。IE7 で参照すると、次のような CSS を書くことができます。
#1 { color: #333; /* Moz */ * html #1 { color: #666; } /* IE6 */ *+html #1 { color: #999; } /* IE7 */
すると、Firefox では #333、IE6 では # と表示されます。 IE7では文字色は#999と表示されます。
2 CSS レイアウトの中央揃えの問題
主なスタイル定義は次のとおりです:
body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
親の最初element TEXT-ALIGN を定義します: center; これは、IE では、親要素内のコンテンツが中央に配置されることを意味します。
ただし、mozilla の中心に置くことはできません。解決策は、サブ要素を設定するときに「MARGIN-RIGHT: auto;MARGIN-LEFT: auto;」を追加することです
この方法を使用してページ全体を中央に配置したい場合は、使用しないことをお勧めします。 DIV では、複数の div を順番に分割できます。分割された各 div で MARGIN-RIGHT: auto;MARGIN-LEFT: auto; を定義するだけです。
ボックス モデルの 3 つの異なる解釈
#box{ width:600px; //ie6.0 の場合 - width:500px; //ff+ie6.0 の場合 } #box{ width:600px! important //ff width の場合:600px ; //ff+ie6.0 の場合 width /**/:500px; //ie6.0- の場合
4 浮動小数点 ie によって生成される 2 倍の距離 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;
5 IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个
#container{ min-width: 600px; width:e?xpression(document.body.clientWidth < 600? “600px”: “auto” ); }
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
7 清除浮动
.hackbox{ display:table; //将对象作为块元素级的表格显示 }
或者
.hackbox{ clear:both; }
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的
……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden; }
8 DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%; } *html #left{ margin-right:-3px; //这句是关键 } HTML代码
9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{} p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
10 IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
11 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用 margin 或paddign 时。例：
p对象中的内容
CSS:
#box {background-color:#eee; } #box p {margin-top: 20px; margin-bottom: 20px; }
解決策: P オブジェクトの上下に 2 を追加します。空の div オブジェクトの CSS コード: .1{height:0px;overflow:hidden;} または DIV に border 属性を追加します。
IE ブラウザをブロックします (つまり、IE では表示されません) *:lang(zh) select {font:12px ! important;} /*FF、OP に表示されます*/ select:empty {font:12px ! important;} / *safari で表示*/ ここで select はセレクターであり、状況に応じて変更できます。 2 番目の文は、MAC 上の Safari ブラウザに固有のものです。
*+html {…} を認識するのは IE7 だけです。IE7 専用のスタイルを作成する必要がある場合、この HACK を使用できます。
IE6 以下の認識 * html {...} ここに特に注意してください。多くの家主が IE6 用の HACK を作成しています。実際には、IE5.x もこの HACK を認識します。他のブラウザでは認識されません。 html/**/ >body select {……} この文は前の文と同じ効果があります。
IE6 のみ認識しません select { display /*IE6 は認識しません*/:none;} ここでの主な目的は、コロンの前に解放される CSS コメントを通じて属性と値を分離することです。
IE6 と IE5 のみ select/**/ { 表示 /*IE6、IE5は認識しません*/:none;} 上記の文との違いは、セレクターと中括弧の間に追加の CSS コメントがあることです。
IE5 だけが認識しない select/*IE5 が認識しない*/ { display:none;} この文は、前の文から属性領域のコメントを削除したものです。 IE5のみ認識しません
ボックスモデルソリューションは{width: IE5を処理しました。これは明確にする必要があります。
フローティングをクリアする select:after {content:"."; display:block; height:0; clear:both; Visibility:hidden;} Firefox では、子がすべてフローティングの場合、親の高さを完全にラップすることはできません。子全体を定義してから、このフローティング HACK を使用して親を 1 回定義すると、この問題は解決されます。
切り捨て省略記号 select { -o-text-overflow:ellipsis; text-overflow:nowrap; overflow:hidden; } これは、長さを超えたテキストを自動的に切り取ります。省略記号、良いテクニックです。 Firefox が現在サポートしていないだけです。
@media all and (min-width: 0px){ select {……} } を認識するのは Opera のみです Opera ブラウザーについては別途設定を行ってください。
上記は、CSS を記述する際のいくつかのハックです。これにより、ハックの使用頻度が減り、1 つのページに多くのハックが必要なくなります。多くの場合、ブラウザはハックを使用しなくても正常に動作します。互換性のあるコンテンツを分離したい場合は、以下のフィルターをいくつか試してください。これらのフィルターの一部は CSS で作成され、フィルターを通じて特別なスタイルをインポートします。また、一部は HTML で作成され、条件を通じて必要なパッチ スタイルをリンクまたはインポートします。
IE5.x フィルター、IE5.x のみが表示されます @media tty { i{content:"";/*" "*/}} @import 'ie5win.css';} }/* */
IE5/MAC フィルターは通常は必要ありません /**//*/ @import "ie5mac.css"; /**/
以下は IE の条件付きコメントです。個人的には、条件付きコメントを使用する方が完璧だと思います。対応する Hack を呼び出します。ハッキングする必要がある部分を別のファイルに置くと、Hacked スタイルを呼び出すことができます。これは非常に使いやすいだけでなく、 CSS 自体を作成するのに役立ちます。一般的に、CSS を記述するとき、Hack を含むすべてのコードを CSS に記述すると、より厳密に観察できます。ファイルをハックすることができます。そして、独立して書くとき、最初に CSS をハックする必要があるのか、それとも最初に Hack するようにメイン CSS の内容を調整するべきなのかを考えます。 Hack は多くのブラウザを非常に従順にします。笑 IE の if 条件 Hack は IE のみで使用できます。認識する
IE5.0 のみ認識可能 IE 5.0+ IE5.0 のみ IE5.5 で認識可能
IE6 のみ認識可能 IE 7/- IE6 および IE6 未満の IE5.x のみ認識可能 IE 7 のみ/- IE7 のみ認識
IE6、IE7、FF の互換性に関する機能 p对象中的内容
CSS HACK コード: すべてのブラウザーに共通 高さ: 100px;
IE6 固有の高さ: 100px; 25175.net を搭載
IE6 固有の高さ: 100px; +height: 100px;
IE7 と FF で共有される高さ: 100px ! important (priority); 1. CSS HACK
1, ! important (あまり推奨されません。次の方法を使用してください)最も安全です)
IE7 の !payment のサポートにより、! important メソッドは IE6 の HACK 専用になりました (記述に注意してください。宣言位置は事前に指定する必要があることに注意してください。)
コード: Firefox の IE6/IE77
コード:
注: *+html HACK IE7 の場合は、HTML の先頭に次のステートメントがあることを確認する必要があります。
コード:
2. Universal Float クロージャー (非常に重要!) これを使用すると、複数の div を整列させるときに不正確な間隔が発生する問題を解決できます。
クリアフロートの原理については、を参照してください。 [構造マークアップを使用せずにフロートをクリアする方法]。次のコードをグローバル CSS に追加して、閉じる必要がある div を指定します。 class="clearfix" を追加するだけで毎回機能します。 コード:
3. その他の互換性に関するヒント (非常に便利)
1. FF の下の div にパディングを設定すると、 width と height を増加させますが、IE では増加しません (!重要な問題を解決できます)。 1) line-height を現在の div と同じ高さに設定し、vertical-align を使用します。 (コンテンツを折り返さないように注意してください。) 2). 水平方向の中央揃え: 0 auto; (もちろん普遍的ではありません) 3. コンテンツにスタイルを追加する必要がある場合は、次のようにします。 set display: block; (ナビゲーションタグ共通) 4. FFとIEのBOXの理解の違いにより2pxの違いが生じたり、IEではfloatに設定したdivのマージンが2倍になるなどの問題が発生します。 list-style と padding は FF でデフォルトで使用されます。不要なトラブルを避けるために、事前に宣言するのが最善です。 (ナビゲーション タグとコンテンツ リストでよくあることです) 6. div の高さを外部ラッパーとして設定しないことが最善です。 7. ハンド カーソルについて: ポインター コードを貼り付けます。
互換性のあるコード: ハックに最も推奨されるモードです。 /* FF */ .submitbutton { float:left; width: 40px; margin-top: 24px; margin-right: 12px; } /* IE7 */ *+html .submitbutton { margin-top: 21px; }
ブラウザハックとは: 異なるブラウザ (Firefox IE7 IE6) を使用して同じ Web サイトまたはページにアクセスすると、互換性の問題により、正常に表示されるものもあれば、異常に表示されるものもあり、CSS を作成するときに非常にイライラします。しかし、別のブラウザーには新たな問題が発生しています。 HACK は、CSS 内でさまざまなブラウザをサポートするスタイルを個別に記述することができる方法です。今では調和が生まれています。ふふ！
Microsoft が最近リリースした IE7 ブラウザの互換性は、一部の Web ページ開発者にとって確かに大きな負担となっています。IE7 は標準化されましたが、FF とはまだ多くの違いがあるため、IE7 HACK を使用する必要がある人がたくさんいます。 IE7のHACKとは何なのかと聞かれたことがありますが、実は私も知りません。 IE7 用の特定の HACK はまだ見つかりません。前回の記事に加えて、「CSS Style for Firefox IE6 IE7」のハック方法も非常に役立ちます。
少し論理的思考ができる人なら、IE と FF HACK を一緒に使用できることを知っているでしょう。たとえば、次の 3 つの HACK があります: (初心者に適しています。笑、専門家はここを通り過ぎています。)
プログラム コード
最初の HACK。 HACK 、IE FF はすべてのブラウザに共通です (実際には HACK ではありません) height:100px; 2 番目の HACK は IE6_height:100px に共通です
さて、これら 3 つの HACK を紹介しました。次に、スタイル内の各属性に対して IE6 IE7 FF 固有の HACK を定義する方法を見てみましょう。順序は間違っていません。
プログラム コード
height:100px; *height:120px; _height:150px;
各ブラウザがこれら 3 つの属性をどのように理解するかを簡単に説明します。
FF では 2 番目と 3 番目の属性は認識されないため、 height:100px; と読み取られます。 在IE7下，第三个属性IE7不认识，所以它读第1、2个属性，又因为第二个属性覆盖了第一个属性，所以IE7最终读出的是第2个属性 *height:120px;
在IE6下，三个属性IE6都认识，所以三个属性都可以读取，又因为第三个属性覆盖掉前2个属性，所以IE6最终读取的是第三个属性。
1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：
#1 { color: #333; } /* Moz */ * html #1 { color: #666; } /* IE6 */ *+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
2 css布局中的居中问题
主要的样式定义如下：
body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解释.
#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0 } #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0- }
4 浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;
5 IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个
#container{ min-width: 600px; width:e?xpression(document.body.clientWidth < 600? “600px”: “auto” ); }
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
7 清除浮动
.hackbox{ display:table; //将对象作为块元素级的表格显示 }
或者
.hackbox{ clear:both; }
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的
……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden; }
8 DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%; } *html #left{ margin-right:-3px; //这句是关键 } HTML代码
9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{} p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
10 IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
11 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用 margin 或paddign 时。例：
CSS:
#box {background-color:#eee; } #box p {margin-top: 20px; margin-bottom: 20px; }
解決策: P オブジェクトの上下に 2 を追加します。空の div オブジェクトの CSS コード: .1{height:0px;overflow:hidden;} または DIV に border 属性を追加します。
IE ブラウザをブロックします (つまり、IE では表示されません) *:lang(zh) select {font:12px ! important;} /*FF、OP に表示されます*/ select:empty {font:12px ! important;} / *safari で表示*/ ここで select はセレクターであり、状況に応じて変更できます。 2 番目の文は、MAC 上の Safari ブラウザーに固有のものです。
IE7 でのみ認識 *+html {…} この HACK は、IE7 専用のスタイルを作成する必要がある場合に使用できます。
IE6 以下の認識 * html {…} ここに特に注意してください。多くの家主が IE6 用の HACK を作成しています。実際には、IE5.x もこの HACK を認識します。他のブラウザでは認識されません。 html/**/ >body select {……} この文は前の文と同じ効果があります。
IE6 のみ認識しません select { display /*IE6 は認識しません*/:none;} ここでの主な目的は、コロンの前に解放される CSS コメントを通じて属性と値を分離することです。
IE6 と IE5 のみ select/**/ { 表示 /*IE6、IE5は認識しません*/:none;} 上記の文との違いは、セレクターと中括弧の間に追加の CSS コメントがあることです。
IE5 だけが認識しない select/*IE5 が認識しない*/ { display:none;} この文は、前の文から属性領域のコメントを削除したものです。 IE5 のみが認識しません
ボックス モデル ソリューション select {width: IE5.x width; voice-family: 継承; width: 正しい幅; }加工された。これは明確にする必要があります。
フローティングをクリアする select:after {content:"."; display:block; height:0; clear:both; Visibility:hidden;} Firefox では、子がすべてフローティングの場合、親の高さを完全にラップすることはできません。子全体を定義してから、このフローティング HACK を使用して親を 1 回定義すると、この問題は解決されます。
切り捨て省略記号 select { -o-text-overflow:ellipsis; text-overflow:nowrap; overflow:hidden; } これは、長さを超えたテキストを自動的に切り取ります。省略記号、良いテクニックです。 Firefox が現在サポートしていないだけです。
@media all and (min-width: 0px){ select {……} } を認識するのは Opera のみです Opera ブラウザーについては別途設定を行ってください。
上記は、CSS を記述する際のいくつかのハックです。これにより、ハックの使用頻度が減り、1 つのページに多くのハックが必要なくなります。多くの場合、ブラウザはハックを使用しなくても正常に動作します。互換性のあるコンテンツを分離したい場合は、以下のフィルターをいくつか試してください。これらのフィルターの一部は CSS で作成され、フィルターを通じて特別なスタイルをインポートします。また、一部は HTML で作成され、条件を通じて必要なパッチ スタイルをリンクまたはインポートします。
IE5.x フィルター、IE5.x のみが表示されます @media tty { i{content:"";/*" "*/}} @import 'ie5win.css';} }/* */
IE5/MAC フィルターは通常は必要ありません /**//*/ @import "ie5mac.css"; /**/
以下は IE の条件付きコメントです。個人的には、条件付きコメントを使用する方が完璧だと思います。対応する Hack を呼び出します。ハッキングする必要がある部分を別のファイルに置くと、Hacked スタイルを呼び出すことができます。これは非常に使いやすいだけでなく、 CSS 自体を作成するのに役立ちます。一般的に、CSS を記述するとき、Hack を含むすべてのコードを CSS ファイルに記述すると、より厳密に観察できます。と、自由にハッキングできるので、CSSを先にHackする必要があるのか、それともHackが必要ないようにメインのCSSを調整するべきなのかを無意識に考えてしまいます。 Hack は多くのブラウザを非常に従順にします。笑
IE の if 条件のコメントを参照してください。すべての IE が認識します。 IE5.0 のみ認識可能 IE 5.0+ IE5.0 のみ IE5.5 で認識可能
IE6 のみ認識可能 IE 7/- IE6 および IE6 以下の IE5.x のみ認識可能 IE 7 のみ認識可能 /- IE7 のみ認識可能
Css 当中有许多的东西不不按照某些规律来的话，会让你很心烦，虽然你可以通过很多的hack，很多的!important 来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网站，他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕？而他们看似复杂的模版下面使用的Hack 少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐，我们找到一定的方法，是完全可以让他们和谐共处的。不要你认为发现了hack的办法，你就掌握了一切，我们并不是Hack的奴隶。
div ul li 的嵌套顺序
今天只讲一个规则。就是，然后再是
的时候，你会发现你的间隙十分难控制，一般情况下，IE6和IE7会凭空多一些间距。但很多情况你来到下一行，间隙就没了，但是前面的内容又空了很大一块，出现这种情况虽然你可以改变IE的Margin，然后调整Firefox下面的Padding，以便使得两者显示起来得效果很相似，但是你得CSS将变得臭长无比，你不得不多考虑更多可能出现这种问题补救措施，虽然你知道千篇一律来Hack它们，但是你会烦得要命。
具体嵌套写法
遵循上面得嵌套方式，