3. その他の互換性に関するヒント
1. FF の下の div にパディングを設定すると幅と高さが増加しますが、IE では増加しません (!重要な問題を解決できます) たとえば、width:115px ! important;width: 120px;padding:5px;
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
放到 标签下，然后为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;}
8 DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}
9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
10 IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
11 高度不适应
CSS:
#box {background-color:#eee; }
#box p {margin-top: 20px; text-align:center; }空の div オブジェクトの CSS コードを上下に 2 つ追加します: .1{height:0px;overflow:hidden;} または、div に border 属性を追加します。
IE ブラウザをブロックします (つまり、IE では表示されません)
*:lang(zh) select {font:12px !重要;} /*FF, OP 表示*/
select:empty {font:12px ! important;} /*Safariで表示*/
ここがセレクターなので状況に応じて変更してください。 2 番目の文は、MAC 上の Safari ブラウザーに固有のものです。
IE7 でのみ認識されます
*+html {…}
この互換性は、IE7 専用のスタイルを作成する必要がある場合に使用できます。
IE6 以下の識別
* html {…}
多くの地主が IE6 と互換性があると書いていますが、実際には IE5.x もこの互換性を認識します。他のブラウザでは認識されません。
html/**/ >body select {……}
この文は前の文と同じ効果があります。
IE6のみ認識しません
select{display /*IE6は認識しません*/:none;}
ここでは主に CSS コメントを通じて属性と値を分離しており、コロンの前に解放されます。
IE6 と IE5 のみ
select/**/ { 表示 /*IE6、IE5は認識しません*/:none;}
上の文との違いは、セレクターと中括弧の間に追加の CSS コメントがあることです。
IE5のみ認識しません
select/*IE5は認識しません*/ { display:none;}
この文は、前の文から属性領域のコメントを削除したものです。 IE5 のみが
Box モデル ソリューション
selct {width:IE5 を認識しません。!処理することが重要です。これは明確にする必要があります。
float をクリアします
select:after {content:"."; display:block; height:0; clear:both; Visibility:hidden;}
子がすべてフローティングになっている場合、親の高さは子全体を完全にラップすることは不可能であり、この明確な浮動互換性を使用して親を一度定義すると、この問題は解決できます。
切り捨て省略
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
これは、長さを超えた後に、余分なテキストを自動的に切り取ります。省略記号を使用するのは良いテクニックです。 Firefox が現在サポートしていないだけです。
Opera でのみ認識
@media all and (min-width: 0px){ select {……} }
Opera ブラウザ用に別途設定を行ってください。
上記は、CSS を記述する際の互換性の一部です。正しいタグのネスト (div ul li のネストされた構造関係) に従うことをお勧めします。これにより、互換性を使用する頻度が減り、誤解を避けることができます。1 つのページを維持するために多くの互換性は必要ありません。多くの場合、ブラウザは互換性がなくても問題なく動作する可能性があります。これらは、互換性コンテンツを分離するために使用されます。以下のフィルタを試してみるとよいでしょう。これらのフィルターの一部は CSS で作成され、フィルターを通じて特別なスタイルをインポートします。また、一部は HTML で作成され、条件を通じて必要なパッチ スタイルをリンクまたはインポートします。
IE5.x 用のフィルター。IE5.x のみが表示されます
@media tty {
i{content:"";/*" "*/}} @import 'ie5win.css' /*";}
} /* */
IE5/MAC フィルターは通常は必要ありません
/**//*/
@import "ie5mac.css";
/**/
以下は、IE の条件付きコメントです。意見 条件付きコメントを使用して対応する互換性を呼び出すことは、互換性が必要な部分を別のファイルに置くことで、互換性のあるスタイルを呼び出すことができるだけではありません。非常に使いやすく、CSS自体を作る上でも、互換性を含めたコードをすべてCSSに記述しておくと、互換性を使う必要があるかどうかをより厳密に観察できることが多いです。非常にカジュアルなので、CSSとの互換性を持たせるべきか、調整を先にするべきかを無意識に考えてしまいます。互換性を最小限に抑えて、多くのブラウザを非常に従順にするとき、この IE 条件メモを参照してください。使用可能
IEのみ
すべてのIEが認識可能
IE5.0のみが認識可能
IE5.0+のみが認識可能
IE5.0はIE5.5を置き換え可能
IE6のみが認識可能
IE7/-のみが認識可能
IE6で認識可能IE6以下のIE5.x
IE 7/-のみ
IE7のみ認識可能
CSS に特定のルールに従っていないものがたくさんあると、非常にイライラするでしょう。多くの互換性と ! important を使用して制御することはできますが、長期的には非常に気が進まないことになるでしょう。 CSS によって IE6、Ie7、Firefox、さらには Safari や Opera さえも完璧に動作する優れた Web サイトを羨ましく思いませんか?そして、一見複雑なテンプレートは互換性をほとんど使用していません。実際、IE と Firefox はそれほど不調和なものではなく、これらを調和して共存させる特定の方法を見つけることができることを知っておく必要があります。互換性のある方法を見つけたら、すべてをマスターしたことになるとは考えないでください。私たちは互換性の奴隷ではありません。
div ul li のネスト順序
今日は 1 つのルールだけを説明します。
の三角関係です。私の経験では、 が外側にあり、
が内側にあり、 を
内にネストすることはお勧めできません。たくさんのものを詰め込みます。このようなルールに従うと、 の代わりに を内側に置くだけで、不運で不従順なギャップが発生しなくなります。通常の状況では、IE6 と IE7 には、何もないところからさらに多くのギャップが生じます。しかし、多くの場合、次の行に進むと隙間は消えますが、前の内容は空になっています。この場合、IE の Margin を変更し、Firefox で Padding を調整すると、両方が表示されるようになります。効果は非常に似ていますが、CSS が非常に臭くなり、この問題に対する可能な解決策をさらに考える必要があります。それらすべてと互換性があることはわかっていても、死ぬほどイライラすることになります。 < /div> を CSS で指定します。 0px;Padding:0px;list-style:none;}、ここで list-style:none は、IE と Firefox ではデフォルトでドットや数字などのディレクトリ タイプのタグが表示されるため、
タグが先頭に表示されないようにします。効果は多少異なります。したがって、何も工夫する必要はありません。IE6、IE7、Firefox で表示される内容 (外側の余白、間隔、高さ、幅) にほとんど違いはありません。注意すれば、アイコンの品質には違いがありますが、表示を制御するために大きな CSS を調整する必要はなく、通常は 1 つまたは 2 つの場所にのみ対応します。この互換性はさまざまな場所に適用できます。さまざまな場所でさまざまな互換性メソッドを繰り返しデバッグする必要がありますか? ul.class1、ul.class2、ul.class3 {xxx:xxxx} を使うと互換させたい箇所を簡単に振り分けて互換させることができます。 Div+CSS メソッドでは、ほぼ無制限にネストすることができますが、上記のルールに従うことで、よりリラックスして、半分の労力で 2 倍の結果を得ることができます。 6. CSS 互換性ポイントの分析 IE と FF
CSS 互換性ポイント:
DOCTYPE は CSS 処理に影響します
FF: margin-left と margin-right が auto に設定されている場合、div はすでに中央に配置されていますが、IE は機能しません
FF: 本体の設定 テキストを揃えるとき、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 アーキテクチャを使用していることも事実ですが、未熟な使い方によるものなのか、不明確な考え方によるものなのか、いくつかの問題があります。皆さんが周りを見回さないように、以下に私が遭遇した問題のいくつかを書き留めておきます。 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 の BOX 解釈は矛盾しています。IE5 では div{width:300px;margin:0 10px 0 10px;} の幅は 300px-10px の最終 div の幅として解釈されます (右パディング)。 -10px (左パディング) は 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”>
に変更するだけです
7、10 のことCSS スキルを知らないかもしれません
1. CSS フォント属性の省略規則
一般的に、CSS でフォント属性を設定する方法は次のとおりです:
以下は引用された内容です: font-weight:bold;font-style:italic ;font-variant:small-caps;font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
但也可以把它们全部写到一行上去：
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。
2、同时使用两个类
一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：
…
同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在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; 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 }
このようにして、コンテナ内のすべての要素は次のように使用できます:
… もちろん、次のようにすることもできます:
margin: 5px 0 0 30px
4 つの数字の順序は上、右、下、左であることに注意してください。もちろん、場合によってはマージンよりも位置決めの方が良い場合もあります。
10. 画面の下部に直接表示される背景色
垂直方向の制御は CSS の機能を超えています。ナビゲーションバーをコンテンツバーのようにページの一番下に直接移動させたい場合は、テーブルを使用するのが非常に便利ですが、次のようにCSSのみを使用する場合は次のようになります。 }
ナビゲーションバーが短くなりました 真っ直ぐ下に行くのではなく、コンテンツが途中で終わった時点で終了します。それについて私たちは何ができるでしょうか？
残念ながら、チートする唯一の方法は、列幅と同じ幅で短い列に背景画像を追加し、設定された背景色と同じ色にすることです。
body {background: url(/blog/blue-image.gif) 0 0repeat-y }
現時点では em を単位として使用することはできません。その場合、リーダーがフォント サイズを変更すると、トリックはpxのみ使用可能です。
この記事は http://shenxiaolei.iteye.com/blog/469060 から転載されました
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
