ie678、FF、chrome_html/css_WEB-ITnoseのcss互換性-htmlチュートリアル-php.cn

#test{ color:red; /* 所有浏览器都支持 */ color:red !important;/* Firefox、IE7支持 */ _color:red; /* IE6支持 */ *color:red; /* IE6、IE7支持 */ +color:red; /* IE7支持 */ color:red\9; /* IE6、IE7、IE8支持 */ color:red\0; /* IE8支持 */}body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */
ログイン後にコピー

其他说明：

1、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：

2、body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个。

3、还有其他写法，比如：

*html #test{}或者 *+html #test{}

4、*+html 对IE7的hack 必须保证HTML顶部有如下声明：http://www.w3.org/TR/html4/loose.dtd

5、顺序：Firefox、IE8、IE7、IE6依次排列。

一、CSS HACK

以下两种方法几乎能解决现今所有HACK

1. !important

随着IE7对!important的支持， !important 方法现在只针对IE6的HACK。（注意写法，记得该声明位置需要提前）

#test{ width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */}
ログイン後にコピー

2. IE6/IE77对FireFox

*+html 与 *html 是IE特有的标签，firefox 不支持，而*+html 又为 IE7特有标签。

#wrapper {width:120px; } /* FireFox */*html #wrapper {width:80px;} /* ie6 fixed */*+html #wrapper {width:60px;} /* ie7 fixed, 注意顺序 *
ログイン後にコピー

注意：

*+html 对IE7的HACK 必须保证HTML顶部有如下声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">
ログイン後にコピー

二、万能 float 闭合

将以下代码加入CSS 中，给需要闭合的div加上 class="clearfix" 即可，屡试不爽。

<style>/* 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 */</style>
ログイン後にコピー

三、其他兼容技巧（以下摘自互联网，不代表个人完全认同其解决方法）

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)

2, 居中问题.

1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)

2).水平居中. margin: 0 auto;(当然不是万能)

3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)

4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.

5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)

6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.

7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

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;

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，

これら 2 つの値は通常のブラウザでは変更されません。min-width と min-height のみを使用すると、IE では幅と高さがまったく設定されないことになります。

たとえば、背景画像を設定したい場合は、この幅の方が重要です。この問題を解決するには、次のようにします。

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; min-width: 80px; }

6 ページの最小幅

min-width は、レイアウトを確実に保つために、要素の最小幅が特定の幅未満にならないように指定できる非常に便利な CSS コマンドです。常に正しい。しかし、IE はこれを認識せず、実際には幅を最小幅として使用します。このコマンドを IE で機能させるには、タグの下に
を配置し、その div のクラスを指定します:

その後、CSS は次のように設計されます:

#container{ min-width : 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}

最初の min-width は通常ですが、2 行目の幅は Javascript のみを使用します。これを認識できるのは IE だけなので、HTML ドキュメントの形式も低くなります。実際にはJavaScriptの判断により最小幅を実装しています。

7 Clear float

.hackbox{ display:table; // オブジェクトをブロック要素レベルのテーブルとして表示} または .hackbox{ clear:both;}

または add: after (擬似オブジェクト) , set オブジェクトの後に発生するコンテンツは通常、コンテンツと組み合わせて使用されます。IE はこの疑似オブジェクトをサポートしていないため、IE/WIN ブラウザーには影響しません。これの最も厄介なことは...#box:after{ content: "."; display: block; height: 0; clear: Both; Visibility: hidden;}

8 DIV フローティング IE テキストを生成します-ピクセルバグ

左側のオブジェクトはフローティングで、右側のオブジェクトのテキストは左側から 3 ピクセル離れた位置に配置されます。 left; width:800px;}# left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px;
HTML コード

9 属性セレクター (これは互換性があるとは考えられません。CSS を非表示にするバグです)

p[id]{}div[id]{}

これは IE6.0 およびそれ以下のバージョンでは非表示になっており、機能しますFF と OPera を使用して

属性の選択セレクターとサブセレクターの間にはまだ違いがありますが、サブセレクターの範囲は形式的には狭いですが、たとえば、p では属性セレクターの範囲が比較的広くなります。 [id]、id を持つすべての p タグは同じスタイルです。

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 オブジェクトの CSS コード: 1{height の上下に 2 つの空の div オブジェクトを追加します。 :0px;overflow:hidden;}または、DIV に border 属性を追加します。

参考: http://www.liuzp.com/css/15.html

CSS の互換性は、一般にフロントエンド初心者にとって頭痛の種です。書かれた CSS がさまざまなブラウザーで異なる効果を示すことは避けられません。それらはすべて異なるため、さまざまな css ハックの記述方法が出てきています。実際、標準化されたプロジェクト開発では、互換性の問題が発生する場合は非標準的な記述が原因であることが多いため、可能であれば css ハックを使用することが推奨されています。しかし、ブラウザ自体、特に悪質な IE には確かにいくつかのバグがあります。

ヒント: CSS ハックとは何ですか?

IE6、IE7、IE8、Firefoxなどの異なるブラウザはCSS解析の理解が異なるため、生成されるページ効果は異なり、必要なページ効果が得られません。現時点では、同時に異なるブラウザと互換性があり、異なるブラウザで必要なページ効果が得られるように、ブラウザごとに異なる CSS を記述する必要があります。ブラウザごとに異なる CSS コードを記述するこのプロセスは CSS ハックと呼ばれ、CSS ハックの作成とも呼ばれます。

各ブラウザの CSS ハック互換性表:

IE6IE7IE8FireFoxChromeSafari!重要Y*+YY