ie678、FF、chrome_html/css_WEB-ITnoseのcss互換性

ie678、FF、chrome_html/css_WEB-ITnoseのcss互換性

関連記事

ホームページ > 記事 > ウェブフロントエンド > ie678、FF、chrome_html/css_WEB-ITnoseのcss互換性

WBOYオリジナル: 2016-06-24 11:51:401441ブラウズ

参考: 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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS+JSでタブラベル切り替えを実装_html/css_WEB-ITnose次の記事：CSS+JSでタブラベル切り替えを実装_html/css_WEB-ITnose

続きを見る

#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的网站上添加一行代码即可解决问题，此代码如下：

9e1190004a33f95e55a554860dbfffc5

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

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 で機能させるには、6c04bd5ca3fcae76e30b72ad730ca86d タグの下に dc6dce4a544fdca2df29d5ac0ea9906b を配置し、その div のクラスを指定します:

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

#container{ min-width : 600px; width:expression(document.body.clientWidth bb0811adbaa90d2680d2867a1ad2fa16 961dd75297247cb17f67e6948fb0666816b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

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 を使用している場合、内側のオブジェクトの高さが変更された場合に、外側のレイヤーの高さを自動的に調整できないことを意味します。

例:

b390322fe69e754cc2d7247050226b6d

94b3e26ee717c64999d7867364b1b4a3

16b28748ea4df4d9c2150843fecfba68

CSS: #box {background-color: # eee; }

#box p {margin-top: 20px; margin-bottom: 20px; }

解決策: P オブジェクトの CSS コード: 1{height の上下に 2 つの空の div オブジェクトを追加します。 :0px;overflow:hidden;}または、DIV に border 属性を追加します。