DIV+CSS 互換ソリューション_html/css_WEB-ITnose

CSS がさまざまなブラウザに対応していることはよくあることです。以下の内容は、まったく目新しいものではありません。

1. CSS HACK

現在、次の 2 つのメソッドでほぼすべての HACK を解決できます

1、! important

IE7 の ! important サポートにより、 ! important メソッドは IE6 の HACK のみに使用できるようになりました (記述に注意してください。宣言位置は事前に必要です。)

以下は引用内容です:
#wrapper
{
width: 100px! important
width: 80px;

; 2、Fire Fox 用 IE6/IE77

以下は引用された内容です:
*+html と *html は IE 固有のタグであり、Firefox ではサポートされていません。また、*+html は IE7 固有のタグです。 ;スタイル>
#wrapper { 幅: 120px; }
*html #wrapper { 幅: 60px;}
}
注:
*+html HACK for IE7 は保証されている必要があります HTML の先頭に次のステートメントがあります:



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

フロートクリアの原理については、[構造マークアップなしでフロートをクリアする方法]を参照してください
以下を追加しますコードをグローバル CSS に追加し、閉じる必要がある div に class="clearfix" を追加します。

以下は引用された内容です:



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

1、FF Padding の div 設定により幅と高さが増加しますが、IE では増加しません (!重要)。 、中央揃えの問題です。
1) line-height を現在の div と同じ高さに設定し、vertical-align : middle を使用します。(コンテンツを折り返さないように注意してください。)
2)。 margin: 0 auto;(もちろん万能ではありません)
3. aタグ内のコンテンツにスタイルを追加する必要がある場合は、display: block;を設定する必要があります(Navigationタグで共通)
4, の違いFF と IE の間の BOX を理解すると、IE では 2px の違いが発生し、float に設定された div のマージンが 2 倍になるなどの問題が発生します。最後に、FF では ul タグにデフォルトでリストスタイルとパディングが付いています。不要なトラブルを避けるために、事前に宣言してください (ナビゲーション タグとコンテンツ リストで一般的です)
6. 高さの適応性を実現するには、div の高さを追加しないでください。 、ハンド カーソルについて。カーソル: ポインタ。ハンドは IE にのみ適用されます。

Firefox ie6 ie7 の CSS スタイル
現在、IE6 と Firefox のテストでは正常に表示できますが、
! important が正しく解釈されると、ページが必要に応じて表示されなくなります。ピンを見つけました
IE7 の良いハックは、「*+html」を使用することです。IE7 でブラウズすれば問題ありません。
次に、次のような CSS を記述します。

以下は引用された内容です:
#1 { color: #333; }
* html #1 { color: #666; }
*+html #1 { color: #999 ; }

すると、フォントの色は Firefox では #333、IE6 では #666、IE7 では #999 として表示されます。

2 CSS レイアウトのセンタリングの問題
主なスタイル定義は次のとおりです:

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: 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- width:500px; //for ff+ie6.0}
#box{ width:600px! important //for ff width :600px; //ff+ie6.0 の場合 width :500px; //ie6.0 の場合

4 浮動小数点によって生成される 2 倍の距離
#box{ float:left width:0; 0 0 100px; //この場合、IE は 200px の距離を生成します。 display:inline; //float を無視します。
Block 要素と inline という 2 つの要素について詳しく説明します。 Block 要素の特徴は次のとおりです。新しい行上 開始、高さ、幅、行の高さ、マージンはすべて制御可能 (ブロック要素) インライン要素の特徴は次のとおりです。 他の要素と同じ行上では... 制御できません (インライン要素)。 ;

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

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上也能用，可以把一个

放到 标签下，然后为div指定一个类：
然后CSS这样设计：
#container{ min-width: 600px; width:expression(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]{}
这个对于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 属性を追加します。

6. CSS 互換性ポイントの分析 IE と FF

CSS 互換性ポイント:

DOCTYPE は CSS 処理に影響します

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

FF: bodyの設定 テキストを揃えるとき、divはmargin: auto (主にmargin-left、margin-right)を中央に設定する必要があります

FF: パディングを設定した後、divは高さと幅を増やしますが、IEそうではないので、! important を使用する必要があります 追加の高さと幅を設定します

FF: ! important をサポートしますが、IE はそれを無視します。 ! important を使用して FF のスタイルを特別に設定できます

div:vertical の垂直方向のセンタリングの問題-align:middle; 行間隔を DIV 行全体と同じ高さに増やします -height:200px; 次に、テキストを挿入すると、垂直方向の中央に配置されます。欠点は、ラップせずにコンテンツを制御する必要があることです

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

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

には多くの利点があります。 XHTML+CSS アーキテクチャを使用していますが、これもまた事実です。未熟な使い方によるものなのか、不明確な考え方によるものなのか、いくつかの問題があります。皆さんが周りを見回さないように、私が遭遇した問題のいくつかを以下に書き留めておきます^^

1. mozilla Firefox と IE の BOX モデルの説明 不一致により 2px の差が生じます。 解決策:

div{margin:30px! important;margin:28px;}

これら 2 つのマージンの順序を逆にしてはいけないことに注意してください。 Ajie 氏によると、! important 属性は IE では認識できませんが、他のブラウザーでは認識できるそうです。実際、IE では次のように解釈されます:

div{maring:30px;margin:28px}

定義を繰り返すと、最後の定義に従って実行されるため、単に margin:XXpx と書くことはできません!重要;

2、IE5 および IE6 IE5 では、BOX の解釈に一貫性がありません。 div{width:300px;margin:0 10px 0 10px;} は 300px-10px (右パディング)-10px (左パディング) として解釈されます。最終的な div の幅は 280px ですが、IE6 の他のブラウザでは、幅は 300px + 10px (右パディング) + 10px (左パディング) = 320px として計算されます。現時点では、次の変更を行うことができます

div{width:300px! important;width :340px;margin:0 10px 0 10px}

、これが何なのかよくわかりませんが、IE5 とFirefoxはサポートしていますが、IE6はサポートしていません。誰かがそれを理解している場合は、教えてください。 :)

3. Mozilla ではデフォルトで ul タグにパディング値がありますが、IE ではマージンのみが値を持つため、

ul{margin:0;padding:0;}

を定義することでほとんどの問題を解決できます

4. スクリプトに関しては、言語属性は

< type="text/java">

に変更するだけです。 CSS スキルを理解する

1. CSS フォント属性の省略規則

一般に、CSS でフォ​​ント属性を設定する方法は次のとおりです。

以下は引用された内容です。

font-weight:bold;

font-style:italic; ;

font-varient:small-caps;

line-height:1.5em;

font-family:verdana,sans-serif; line :

font: 太字斜体小文字 1em/1.5em ベルダナ、サンセリフ;

本当に良いです!注意点が 1 つあります。この省略方法は、font-size プロパティと font-family プロパティの両方が指定されている場合にのみ機能します。また、font-weight、font-style、および font-variant を設定しない場合は、デフォルト値が使用されるため、この点に注意してください。

2. 2 つのクラスを同時に使用する

通常、1 つの要素に対して設定できるクラス (Class) は 1 つだけですが、2 つ使用できないというわけではありません。実際、これを行うことができます:

...

P 要素にスペースで区切って 2 つのクラスを同時に与えます。各クラスのサイド属性が P 要素に追加されます。 2 つのクラスの属性間に競合がある場合は、後で設定された方が有効になります。つまり、CSS ファイル内で後から配置されたクラスの属性が有効になります。

補足: ID の場合、

...

のように書くことはできません

3. CSS border のデフォルト値

はできません。通常は、境界線の色、幅、スタイルを設定します。

border: 3px Solid #000

これは、境界線を幅 3 ピクセル、黒、実線で表示します。しかし実際には、ここでスタイルを指定するだけで済みます。

如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

4、CSS用于文档打印

许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：



第1行就是显示，第2行是打印，注意其中的media属性。

但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。

5、图片替换技巧

一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

比如你想整个卖东西的图标，你就用了这个图片：

这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：

Buy widgets

但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：

h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px }

注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

6、CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：

#box { width: 100px; border: 5px; padding: 20px }

这样调用它：

...

这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的，让它们显示效果一致。

#box { width: 150px } #box div { border: 5px; padding: 20px }

这样调用：

...

このように、どのブラウザであっても、幅は 150 ポイントです。

7. ブロック要素を中央に配置します

固定幅の Web ページを作成し、Web ページを水平方向に中央揃えにしたい場合は、通常次のようにします。

#content { width: 700px; margin: 0 auto; < ;div id="content"> を使用してすべての要素を囲みます。これは単純ですが十分ではなく、IE6 より前のバージョンではこの効果が表示されません。 CSS を次のように変更します:

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

これにより、Web ページのコンテンツが中央に配置されるため、コンテンツ
text-align: left 。

8. CSS を使用して垂直方向の配置を処理します

テーブルの単位をvertical-align: middle に設定するだけで、垂直方向の配置を簡単に実現できます。しかし、これは CSS では役に立ちません。ナビゲーション バーの高さを 2em に設定し、ナビゲーション テキストを垂直方向の中央に配置したい場合、この属性を設定しても役に立ちません。

CSSメソッドとは何ですか?ちなみに、これらの単語の行の高さを 2em に設定します: line-height: 2em これで完了です。

9. コンテナ内での CSS の配置

CSS の利点の 1 つは、コンテナ内であっても要素を任意に配置できることです。たとえば、このコンテナの場合:

#container {position:relative }

このようにして、コンテナ内のすべての要素が相対的に配置されます:

...

左から 30 ポイント、上から 5 ポイントの位置に配置したい場合は、次のようにすることができます。
#navigation {position:Absolute; left: 30px; top: 5px }

もちろん、次のようにすることもできます:

margin: 5px 0 0 30px

4 つの数字の順序は、上、右であることに注意してください。 、 左下。もちろん、場合によってはマージンよりも位置決めの方が良い場合もあります。

10. 画面の下部に直接表示される背景色

垂直方向の制御は CSS の機能を超えています。ナビゲーションバーをコンテンツバーのようにページの一番下に直接移動させたい場合は、テーブルを使用するのが非常に便利ですが、次のようにCSSのみを使用する場合は次のようになります。 }

ナビゲーション バーを短くする まっすぐ下に移動せず、コンテンツが途中で終了すると終了します。それについて私たちは何ができるでしょうか？

残念ながら、チートする唯一の方法は、列幅と同じ幅で短い列に背景画像を追加し、設定された背景色と同じ色にすることです。

body {background: url(/blog/blue-image.gif) 0 0repeat-y }

現時点では em を単位として使用することはできません。その場合、リーダーがフォント サイズを変更すると、トリックはpxのみ使用可能です。