CSSブラウザ互換ソリューション_CSS/HTML

1. Web ページの背景は半透明です
Web ページの背景は半透明です

コードをコピー コードは次のとおりです。

opacity:0.8;
filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)" ; PNG 画像の半透明の問題を解決する IE6 の CSS メソッド:
#DIVname {
width: 300px;
height: 99px;
background: url('images/top.png') no -repeat トップ;
*背景: なし;
*フィルター :progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='corp', src='template/flower/images/top.png ');
}

2. フローティングをクリア

コードをコピー コードは次のとおりです。

.clearfix:after{content:"."; 表示:ブロック; 高さ:0; クリア:両方; 可視性:非表示}
.clearfix{display:inline-block}
.clear{height:0; line -height:0; font-size:0; overflow:hidden; clear:both; display:block;}
*html 。 clearfix{height:1%;}
.clearfix{display:block;}

3. フローティング IE6 二重マージン
1. ディスプレイを使用します。 inline;
2. IE6 での 3 ピクセル間隔のバグ: IE6 では、テキスト (または非フローティング要素) がフローティング要素の後に続く場合、テキストとフローティング要素の間に余分な 3 ピクセルのギャップが生じます。display:inline またはを追加します。このバグを解決するには、フローティング レイヤーに -3px の間隔を設計します。
3 ピクセル間隔のバグ
div CSS の最小高さ
方法 1:

コードをコピー コードは次のとおりです。

#DIVname {
min-height:150px;
*height:auto! important;
_height:150px;
overflow:visible; }

方法 2:

コードをコピー コードは次のとおりです。

#DIVname {
min-height:1000px;
_height:expression((document.documentElement.clientHeight||document.body.clientHeight)>1000?"1000px":"" );
}

5. IE での Z-index のバグ
一般に、IE では親に対する要件が比較的高くなります。親に位置属性はあるが、z-index 属性が与えられていない場合、デフォルトは 0 であるため、サブセット内で z-index 属性がどれほど高くても役に立ちません。
したがって、一般的には、z-index 属性を含む親に z-index:1 属性を与える必要があります。これにより、多くの不可解な問題が解決されます。
6. IE6 ウィンドウのサイズ変更に関するバグ
本文が中央に配置され、IE ブラウザのサイズが変更されると、本文内の相対的に配置された要素が修正されます。解決策ボディのposition:relative;を定義することです。
7. テキスト サイズと行の高さは互換性がありません
同じサイズの同じフォントの場合、行の高さとサイズはブラウザごとに異なるため、line-height を調整する必要があります。セット。
8. ミラー マージンのバグ
IE6 では、外側の要素に float 要素がある場合、外側の要素で margin-top:5px が定義されている場合、margin-bottom が自動的に生成されます。 : 5px、パディングにも同様の問題が発生します。解決策: 外側の要素にボーダーまたはフロートを設定します。
9. img の下の空白
HTML には次のようになります。

を実行すると、画像の下部がコンテナの下部に近くないことがわかります。これは、img の後の空白文字が原因です。これを解消するには、次のように記述する必要があります:

最後の 2 つのラベルは隣り合っている必要があります。このバグは IE7 でも依然として存在します。解決策は、display:block です。
10. 画像とテキストは密接に関連しています
画像の配置にはテキストの上部、中央、腹部などが含まれることは誰もが知っています。画像とテキストを調整してみてください。 IE と FF で調整できることを確認し、設定が一致していれば、いくら調整しても満足できないことがわかります。 img と text を浮かせてマージンを調整するだけです。
行の高さが失われました。

text

. 残念ながら、IE6 では単一行テキストの行高効果が消えてしまいます。 。 。 , 理由は、 inline-block 要素 が inline 要素と一緒に書かれているためです。解決策: img と text の両方をフロートにします。