CSS互換記述方法の例説明

一般的なブラウザ カーネル エンジンと特定のアプリケーション:

Trident: IE;

Gecko: Firefox;

Webkit: Safari、Google Chrome、Travel 3、Cheetah、Baidu;

Presto: Opera - Opera mini

書き込み順: firefox, IE8, IE7, IE6

IE6:*,_

IE7:*,+

IE8:9,

IE: IE7 より前のバージョンは丸い角をサポートしていません。
FF: -moz-border-radius:4px

ブラウザのバグ
IEの二重マージンバグ

IEでfloatに設定されたdivに設定されているマージンが2倍になります。これはie6に存在するバグです。

解決策: display:inline; を追加します

Floating

DIV フローティング IE テキストにより 3 ピクセルのバグが発生します
左側のオブジェクトはフローティングで、右側は外側のパッチの左マージンを使用して配置されます右側は外側のパッチの左マージンを使用して配置されます。オブジェクト内のテキストは左から 3 ピクセルの間隔で配置されます。 width:50%;}

#right{ width:50% ;}

*html #left{ margin-right:-3px; //この文が重要です}

IE かくれんぼ問題

div アプリケーションは複雑で、各列や DIV などにいくつかのリンクがあり、かくれんぼの問題が発生しやすいことがあります。
一部のコンテンツは表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。 解決策: #layout に line-height 属性を使用するか、#layout に固定の高さと幅を使用します。ページ構造はできるだけシンプルにしてください。

IE のレイアウト プライベート プロパティ

外部ラッパー div として、高さを自動的に調整できるようにするには、ラッパーに float ボックスが含まれる場合に overflow:hidden を追加します。高さは自動的に調整されます。このとき、IE のレイアウトのプライベート属性がトリガーされる必要があります (邪悪な IE!) 互換性を実現するには、zoom:1; を使用します。

.colwrapper{ overflow:hidden;zoom:1; margin:5px auto;}

Typesetting

場合によっては、列 n で必要になることがあります。例:

3 つの列すべての背景色を青に設定します。色の目的はありますが、左中右が下に伸びるにつれて、ページは実際には同じ高さを維持していることがわかります。ページがフロート属性ではなく、ページをフロートに設定する必要があるため、問題が発生します。そこで、親要素のページを追加して、おじいちゃんになります。

高さが不適切

高さが不適切とは、特に次の場合に、内側のオブジェクトの高さが変更された場合に、外側のレイヤーの高さを自動的に調整できないことを意味します。内部オブジェクト マージンまたはパディングを使用する場合。
例:
#box { }

#box p {margin-top: 20px; text-align:center; }

のコンテンツ

解決方法: P オブジェクトの CSS コード: .1{height:0px;overflow:hidden;} の上下に空の div オブジェクトを追加するか、DIV の境界線に追加します。財産。

IE6 で画像の下に隙間があるのはなぜですか?

このバグを解決するには、HTML のレイアウトを変更したり、img を display:block に設定したり、垂直方向の配置を設定したりすることができます。

IEのCSSバグ


p:first-letterと{font-size:300%}の間にスペース、つまりpを追加することで解決できます。 :first-letter {font-size :300%} にすると通常の表示になります。しかし、同じコードは FireFox では正常に見えます。論理的には、 p:first-letter{font-size:300%} の書き方が正しいです。だから問題は何ですか？答えは疑似クラスのハイフン「-」です。 IE にはバグがあり、疑似クラス名にハイフン「-」が含まれている場合、疑似クラス名の後にスペースを続ける必要があります。そうしないと、スタイル定義が無効になります。 FFではスペースがあってもなくても正常に処理できます。

margin-left と margin-right が auto に設定されている場合、IE はすでに中央に配置されています。これは、親要素で text-algin: center を定義する必要があります。親要素内でコンテンツが中央に配置されます。

垂直中央揃え=>コンテンツの折り返しの問題

高さ 30px の div は、デフォルトで左上隅を表示します。垂直方向の中央に配置したい場合は、line-height:30px スタイルを追加します。一番下にしたい場合は、line-height を変更します

値が大きくなるほど、バーストを防ぐために、別のスタイルを指定する必要があります: hidden;

ブラウザのデフォルト値を解決するためのブロックレベルのオブジェクト: 幅と高さ overfl

LI のコンテンツが長さを超えた後に楕円を表示するためのヒント

このトリックは IE および OP ブラウザに適用できます

li { width:200px; text-overflow:ellipsis; オーバーフロー: 非表示; IE ではスクロール バーの色を設定できません。解決策は、本文を

scrollbar-arrow-color:#000; に変更することです。 -color:#fff; scrollbar-darkshadow-color:#fff;



IE6 でこの問題はデフォルトの行が原因で発生します。 overflow:hiddenzoom:0.08 line-height:1px

css 初期化

margin 属性は IE で有効であり、padding 属性は FireFox で有効です。

body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;padding:0;}

img{border:0px;}



ul {margin:0px;padding:0px;}/


ul li {list-style:none;}

/* 明確な修正 */ .clearfix:after {
display:block; visibility:hidden; .clearfix {

display:inline-block; IE Mac から隠す */

.clearfix {display:block;}

/* IE Mac から隠すの終了 */

/* Clearfix の終わり */

または次のように設定します。オブジェクトを変換します ブロック要素レベルのテーブルとして表示されます}

1. 参照が多すぎます: