Css Hack_html/css_WEB-ITnose とは-htmlチュートリアル-php.cn

CSS ハックとは何ですか? Internet Explorer 6、Internet Explorer 7、Mozilla Firefox など、ブラウザーによって CSS 解析の理解が異なるため、生成されるページ効果は異なり、必要なページ効果は得られません。

現時点では、異なるブラウザーに同時に互換性があり、異なるブラウザーで必要なページ効果を得ることができるように、ブラウザーごとに異なる CSS を記述する必要があります。
ブラウザごとに異なる CSS コードを記述するこのプロセスは CSS ハックと呼ばれ、CSS ハックの作成とも呼ばれます。
CSS Hackの原理とは
ブラウザごとにCSSのサポートや解析結果が異なるため、またCSSにおける優先関係のためです。これを使用して、ブラウザごとに異なる CSS を記述することができます。
例えば、IE6は下線「_」とアスタリスク「*」を認識でき、IE7はアスタリスク「*」は認識できるが下線「_」は認識できず、Firefoxは両方を認識できません。待ってください
書き方の順番としては、認識能力の強いブラウザのCSSを最後に書くのが一般的です。書き方については後ほど詳しく説明します。
CSS Hackの書き方
たとえば、IE6とFirefoxブラウザを区別するには、次のように記述できます。

IE6 では赤、Firefox では緑に見えます。
説明:
上記の CSS は Firefox にありますが、その後ろにあるアスタリスクが何であるかを認識できないため、分析の結果は div{background:green } なので、もちろん背景は無視されます。この div は緑色です。
IE6ではどちらの背景も認識でき、その解析結果は div{background:green;background:red;} となるので、優先順位に応じて後ろの赤色の方が優先されますので、当然です。、この div の背景色は赤です。
CSS ハック: IE6、IE7、firefox を区別する
ブラウザの違い、CSS ハックの書き方:
IE6 と FF を区別する:
背景:オレンジ;*背景:青;
IE6 と IE7 を区別する:
背景:緑 !重要;背景 : blue;
IE7とFFの違い:
背景:orange; *background:green;
FF、IE7、IE6の違い:
背景:orange;
FFは*を認識できます。 ;
IE6 IE7 FF
* √ 順序は一般的に FF IE7 IE6
例として「 #demo {width:100px;} 」
#demo {width:100px;} /*FIREFOX、IE6 で実行IE7.*/
* html #demo {width :120px;} /*IE6で実行され、前の定義は後の定義で上書きされるため、IE6では#demoの幅は120pxになります。 */
*+ html #demo {width:130px;} /*IE7の実行で実行されます */
---------------
結局のところ、 #demo の幅は、 3 つのブラウザ:
FIREFOX:100px;
ie6:120px;

==================== ゴージャスな分割線==== ================== =
CSS の

! important は非常に重要な属性ですが、52CSS.com にはこの分野に関する知識があまりありません。これについて比較理解するために次の記事を読んでください。
数日前に CSS コードを書いていたとき、またしても大変でした。なぜなら、IE6 の CSS サポートが非常に貧弱だからです。なぜなら、私が作ったものは基本的に IE に基づいていたからです。しかし、私がこのブログ用に書いた CSS は複数のブラウザ (IE) をサポートする必要があります。問題なのは、IE8 ブラウザに付属している Windows 7 をインストールしたことです。しかし、IE6 を開いたときは問題ありませんでした。 , それでもずれが発生したため、IE6 ではどうなっているのか見てみることにしました。
すべてのCSSブロックを枠線で囲んでみたところ、IEでは他のブラウザに比べて2つのdiv間の距離が明らかに広いことが分かりました。例えば、margin属性を20pxにしてdivを書くと、IEでは40pxのようになってしまいます。そのため、元の精度の計算は正確ですが、IE ではずれています。
この属性は実際には CSS 仕様に含まれているのですが、それがサポートされていないため、多くの CSSer が解決策を見つけました。一般に、CSS では、同じ CSS ブロック内に 2 つの同じプロパティを記述すると、下のものが実際に実行されます。たとえば、次のようになります。 left:40px;

}

.home{
margin-left:20px;
margin-left:40px;
}

その後、実際には 40px に従って実行されます。実行されるステートメントの優先順位を設定します。上記のステートメントを次のように変更すると、

view plaincopy to Clipboardprint?
.home{

margin-left:20px! important;

margin-left:40px;

}

margin-left:20px! important;
Margin-left:40px;
}

すると、Firefox、Google Chrome、IE7 以降では 20px として実行されますが、IE6 では ! important 仕様をサポートしていないため、IE6 では引き続き 40px として実行されます。 IE6 のデザイン上のニーズを満たすために、このルールに従うことができます。IE6 の表示効果が他のブラウザと異なることがわかった場合は、2 つを設定し、上の 1 つに ! important タグを追加します。次の文は不要です。が追加されたため、IE6 は次の手順を実行します。

====================== ゴージャスな分割線======================= =

CSS がさまざまなブラウザと互換性があることは当たり前のことです。以下の内容はあまり目新しいものではなく、初心者に役立つことを願っています。 1. CSS HACK

HACK コンセプト:

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

HACK ルール:

IE は * を認識できますが、

IE6 は * を認識できません。

IE7 は * を認識できますが、!重要です;
FF は認識できます !重要;
IE6 IE7 FF

* &radic ×

√

ブラウザの優先順位: FF
例:

例として「 #demo {width:100px;} 」を取り上げます;

#demo { width:100px; }
* html #demo {width:120px;}
*+html #demo {width:130px;}

---------------

それでは最後に、 #demo の幅3 つのブラウザは次のように解釈されます:

FIREFOX:100px;

ie6:120px;

ie7:130px; 現在、次の 2 つの方法でほぼすべての HACK を解決できます。 ! important メソッドは IE6 の HACK 専用になりました (書き方に注意してください。宣言位置は事前に指定する必要があることに注意してください。)

2、IE6/IE77 for FireFox

*+html と *html は、Firefox ではサポートされていない IE 固有のタグです。また、*+html は、IE7 固有のタグです。
#wrapper
{
#wrapper { width: 120px; ] /* FireFox */
*html #wrapper { width: 80px;} /* ie6 修正 */
*+html #wrapper { width: 60px;} /* ie7 修正、順序に注意してください*/
}
< ;/style>

注: IE7 の
*+html HACK では、HTML の先頭に次のステートメントが必ず含まれるようにする必要があります:

2. ユニバーサルフロートクロージャー

フロートクリアの原理については、[構造マークアップなしでフロートをクリアする方法]を参照してください

グローバル CSS を閉じる必要がある人のために、次のコードをグローバル CSS に追加します。 div に class="clearfix" を追加するだけで、毎回機能します。

3. その他の互換性に関するヒント

1. Mozilla ではデフォルトで ul タグにパディング値がありますが、IE 値ではマージンのみがパディング値を持ちます。したがって、最初に ul{margin:0;padding:0;} を定義すると、ほとんどの問題を解決できます。

2. 中央揃えの問題

1) を解決するために ! important を使用することもできます。 line-height を現在の div と同じ高さに設定してから、vertical-align: middle を渡します。 )

2). 水平方向の中央揃え。マージン: 0 auto; (もちろん普遍的ではありません)
HTML の本文内で任意の項目を中央に配置でき、項目は自動的に同じ左右の境界値を取得します。中央に表示されるようにします。ただし、これは IE6 より前のブラウザでは依然として問題があり、中央揃えにならないため、次のように変更する必要があります:
body {
text-align: center;
}
#content {
text-align: left;
width : 700px;
margin: 0 auto;
}
本文を設定すると、メインコンテンツが中央に配置されますが、すべてのテキストも中央に配置されます。このため、# の div はおそらく希望する効果ではありません。 content を指定する必要があります値: text-align: left

3. IE5 と IE6 の BOX 解釈は矛盾しています

IE5 での div の幅{width:300px;margin:0 10px 0 10px;}

div の幅300px-10px (右パディング)-10px (左パディング) として解釈されます。 div の最終的な幅は 280px です。
IE6 およびその他のブラウザでは、幅は 300px + 10px (右パディング) + 10px (左パディング) として計算されます) = 320ピクセル。
現時点では、div{width:300px! important;width:340px;margin:0 10px 0 10px} に次の変更を加えることができます。これが何なのかよくわかりませんが、IE5 と Firefox がサポートしていることだけがわかります。しかし、IE6 ではそれができません。理解できる人がいたら、教えてください。ありがとうございます。 :)

4. FORM タグと ul タグの事前宣言
これら 2 つのタグは、IE では自動的にマージンを持ちますが、FF ではマージンが 0 になります。そのため、同じように表示したい場合は、マージンを指定するのが最適です。上記の 2 つの問題に対応して、私は通常、CSS で最初にスタイル ul を使用し、form{margin:0;padding:0;} が定義されているので、これは後で行いません。

5.
カーソル: IE FFではカーソルの指の形を同時に表示できますが、IEのみで可能です

6. テキストが長すぎる場合、長い部分は省略記号に変わります。表示されます: IE5、FF 無効ですが、IE6 では有効です

たとえば、非常に長いテキスト行があり、表に 1 行で表示できません。 Phontol.com
固定幅の中国語文字の切り捨て: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; (ただし、複数行ではなく 1 行のテキストの切り捨てのみを処理できます。) IE5 以降 ) FF ではできません。非表示にするだけです。

7.
IE は min- の定義を認識しませんが、実際には通常の幅と高さを min があるかのように扱います。これは大きな問題です。通常のブラウザでは幅と高さだけを使用すると、幅と高さはまったく設定されません。 IEの下で。
たとえば、背景画像を設定したい場合は、この幅がより重要です。この問題を解決するには、次のようにします:

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

8. 浮动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;

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

11. 清除浮动
.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]{}
这个对于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 と Firefox 間の CSS 互換性リスト*/
1.DOCTYPE は CSS 処理に影響します

2.FF: margin-left と margin-right が auto に設定されている場合、div はすでに中央に配置されていますが、IE は機能しません

3.FF: body text-align を設定するとき、div は margin: auto (主に margin-left、margin-right) を中央に設定する必要があります

4.FF: パディングを設定した後、div は高さと幅を増やします。ただし、IE はサポートしないため、追加の高さと幅を設定するには ! important を使用します

5.FF: ! important はサポートされていますが、IE はそれを無視します。 ! important を使用して FF

6 の特別なスタイルを設定できます。 .div の垂直方向の中央揃えの問題：vertical-align:middle; 行間隔 Line-height:200px を DIV 全体と同じ高さに増やしてからテキストを挿入すると、垂直方向の中央揃えになります。欠点は、ラップせずにコンテンツを制御する必要があることです

7.cursor: ポインターは IE FF でカーソルの指の形を同時に表示できますが、手は IE でのみ使用できます

8.FF: 境界線を追加し、リンクの背景色を設定するには、display: block を設定する必要があります。同時に float: left を設定すると、改行がないことが保証されます。メニューバーに関して、a とメニューバーの高さを設定するのは、下端の表示がずれないようにするためです。高さを設定しない場合は、メニューバーにスペースを挿入できます。

9. Mozilla Firefox と IE の BOX モデルの解釈に一貫性がないため、2 ピクセルの違いが生じます。解決策:
div{margin:30px! important;margin:28px;}
これら 2 つのマージンの順序を変更しないでください。 A Jie 氏によれば、属性 ! important は IE では認識されませんが、他のブラウザでは認識されるそうです。実際、IE では次のように解釈されます:
div{maring:30px;margin:28px}
定義を繰り返すと、最後の定義に従って実行されるため、単に margin:XXpx! important; と書くことはできません

10.IE5 と IE6 BOX 一貫性のない解釈
IE5 では
div{width:300px;margin:0 10px 0 10px;}
div の幅は 300px-10px (右パディング)-10px (左パディング) として解釈されますdiv の最終的な幅は 280px ですが、IE6 および他のブラウザーの幅は 300px + 10px (右パディング) + 10px (左パディング) = 320px として計算されます。現時点では、次の変更を行うことができます
div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}
これについて/**/ IE5 と Firefox がサポートしていることだけがわかっていますが、IE6 はサポートしていません。誰かがわかったら、教えてください、ありがとう！ :)

Mozilla ではデフォルトで

11.ul タグにパディング値がありますが、IE ではマージンのみが値を持つため、
ul{margin:0;padding:0;} を定義すると、ほとんどの問題を解決できます

注:

1. float div を閉じる必要があります。

例: (floatA と floatB の属性は float:left; に設定されています)

<#div id="floatA" >
<#div id="floatB" > ;< ;/#div>
<#div id="NOTfloatC" >
ここでの NOTfloatC はパンを継続する必要はありませんが、下方向に配置する必要があります。
このコードはIEでは問題ありませんが、問題はFFにあります。その理由は、NOTfloatC が float ラベルではないため、float ラベルを閉じる必要があるためです。
<#div class="floatB"> の間に
<#div class= を追加します> ;
この div は、宣言の位置に注意する必要があり、float 属性を持つ 2 つの div と同じレベルにある必要があります。それ以外の場合は例外が生成されます。
そしてクリアスタイルを次のように定義します:
.clear{
clear:both;}
さらに、高さを自動的に適応させるために、overflow:hidden; を追加します
ボックスに float が含まれる場合、このとき高さはIE では自動適応は無効です。このとき、IE のレイアウトプライベート属性をトリガーする必要があります (邪悪な IE!) 互換性を確保するには、zoom:1; を使用します。
たとえば、ラッパーは次のように定義されます:
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
2. マージンを 2 倍にする問題。

IE でフローティングに設定された div に設定されたマージンは 2 倍になります。これはie6に存在するバグです。
解決策は、display:inline; を追加することです

例:

<#div id="imfloat">

対応する CSS は

#IamFloat{

float :left;

margin:5px;/*IEでは10pxとして理解されます*/
display:inline;/*IEでは5pxとして理解されます*/}

3 コンテナの包含関係について

何度も特にコンテナー 2 つまたは 3 つの float div などの並列レイアウトがある場合、幅に関して問題が発生しやすくなります。 IE では、外側の層の幅は、より広い内側の div によって圧迫されます。ピクセルレベルの精度で測定するには、必ず Photoshop または Firework を使用してください。

4. 身長についての質問

コンテンツが動的に追加される場合は、高さを定義しないことをお勧めします。ブラウザは自動的に拡大縮小できますが、静的コンテンツの場合は高さを設定するのが最善です。 (自動的に開かない場合もあるようです。何が起こっているのかわかりません。)

5. 最も無慈悲な方法 - !重要;

いくつかの詳細な問題を解決する方法が本当にない場合は、次の方法があります。このメソッドを使用すると、「!重要」の FF が最初に自動的に解析されますが、次のように
.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !重要; /*FF のスタイル*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px /* IE のスタイル */}