画像の垂直方向の中央揃え)

1. IEブラウザモードハックロゴ
1. CSSハックロゴ

コードをコピー

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

ie6 { _property: 値; }
ie7 { +プロパティ: 値; }
ie9 { プロパティ: 値\9\0; }
lte ie7 { *プロパティ: 値; }
gte ie8 { プロパティ: 値\0; }
すべて、すなわち { プロパティ: 値\9; }
/*注意: 絶対に必要な場合を除き、ハックを使用することは推奨されません。ハックフラグを使用する場合は、各ブラウザー (新しい IE ブラウザーを含む) をテストする必要があります。*/

2. IEブラウザ環境ハックロゴ
2.1. すべてのIEブラウザ

コードをコピー

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

<!--[IEの場合]>
<script>アラート('ie');</script>
<![終了]

2.2. IE以外のブラウザ

コードをコピー

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

<!--[!IEの場合]>
<script>アラート('!ie');</script>
<![終了]

2.3. 単一のIEバージョン

コードをコピー

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

<!--[IEのバージョン番号の場合]>
<script>alert('ie バージョン番号');</script>
<![終了]

2.4. IEのバージョン番号以上

コードをコピー

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

<!--[if gte IEのバージョン番号]>
<script>alert('gte IE バージョン番号');</script>
<![終了]

2.5、IEのバージョン番号以下

コードをコピー

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

<!--[if lte IE バージョン番号]>
<script>alert('lte IE バージョン番号');</script>
<![終了]

2. コードで発生する一般的な問題
1. フロートレイアウトを使用する際に注意すべきいくつかの問題
1.1. IE6 でフロートレイアウトを使用すると、余白が 2 重になります。解決方法は、表示をインラインに設定することです。
1.2. float (または絶対位置指定) を使用すると、インライン要素は自動的にブロックレベル要素になります。display: block を設定せずに、幅と高さを直接設定できます。
1.3. IE7 では、float: left; margin-bottom: 20px; の要素の行が複数ある場合、最後の行の要素の外側の下余白は無効になります。
1.4. IE6 および 7 では、ul および ol リスト要素がフロートレイアウトを使用すると、左側とコンテンツに数ピクセルの空白スペースができます。解決方法は、list-style を outside に設定することです。
1.5. 子要素の親要素がフロートレイアウトを使用している場合は、その後のフローティング CSS 疑似要素をクリアし、zoom: 1; を追加して問題を解決します。
2. line-height 属性が無効です。CSS で設定された line-height 属性値は、IE9 では無効です。この問題は主にフォントによって発生します。フォントを Songti または Microsoft Yahei に設定できます。
3. IE6 および 7 では、overflow 属性は無効です。子要素が相対的に配置されている場合、親要素の overflow は hidden に設定され、無効になります。解決策としては、親要素も相対的に配置するように設定することです。
4. li 要素内のサブ要素が浮動した後、li 要素には上方向 (padding-top と同様) または下方向 (margin-top と同様) に数ピクセルの隙間ができます。たとえば、垂直に配置された li 要素には下方向に数ピクセルの隙間ができます。

コードをコピー

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

コードを表示
<!DOCTYPE html>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312" />
<title>リスト li 内の浮動サブ要素によって発生するバグ</title>
<スタイル>
/*グローバルスタイル*/
body、div、dl、dt、dd、ul、ol、li、h1、h2、h3、h4、h5、h6、pre、code、form、fieldset、legend、input、textarea、p、blockquote、th、td、hr、button、article、aside、details、figcaption、figure、footer、header、hgroup、menu、nav、section { margin: 0; padding: 0; }
本文、ボタン、入力、選択、テキストエリア { フォント: 12px/1.5 Arial,"microsoft yahei","微软雅黑E\8F6F\96C5\9ED1"; }
ul { リストスタイル: なし; }
画像 { 境界線: なし; }
/* フローティングスタイルをクリア */
.clear-fix:after { コンテンツ: '.'; 表示: ブロック; 高さ: 0; 可視性: 非表示; クリア: 両方; }
.clear-fix: { ズーム: 1; }
本文 { 背景色: #F00; }
.module { 幅: 200px; 高さ: 300px; 境界線: 1px solid #FFF; マージン: 100px auto; }
.module ul { 幅: 100%; 背景色: #093; }
.module li { 幅: 100%; 背景色: #CCC; }
.module li span { float: left; display: inline; text-align: center; width: 50%; line-height: 60px; }
</スタイル>
</head>
<本文>
<div class="module">
<ul>
<li class="clear-fix"> <span>span1</span><span>span2</span> </li>
<li class="clear-fix"> <span>span1</span><span>span2</span> </li>
<li class="clear-fix"> <span>span1</span><span>span2</span> </li>
<li class="clear-fix"> <span>span1</span><span>span2</span> </li>
<li class="clear-fix"> <span>span1</span><span>span2</span> </li>
</ul>
</div>
</本文>
</html>

図に示すように、IE6と7で表示されます

3. コンテナ画像を垂直中央に固定

コードをコピー

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

コードを表示
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="gb2312" />
<title>画像を垂直方向に中央揃えするデモ</title>
</head>
<スタイル>
/*グローバルスタイル*/
body、div、dl、dt、dd、ul、ol、li、h1、h2、h3、h4、h5、h6、pre、code、form、fieldset、legend、input、textarea、p、blockquote、th、td、hr、button、article、aside、details、figcaption、figure、footer、header、hgroup、menu、nav、section { margin: 0; padding: 0; }
本文、ボタン、入力、選択、テキストエリア { フォント: 12px/1.5 Arial,"microsoft yahei","微软雅黑E\8F6F\96C5\9ED1"; }
ul { リストスタイル: なし; }
画像 { 境界線: なし; }
/* フローティングスタイルをクリア */
.clear-fix:after { コンテンツ: '.'; 表示: ブロック; 高さ: 0; 可視性: 非表示; クリア: 両方; }
.clear-fix: { ズーム: 1; }
.box { 幅: 800px; 余白: 100px 自動; }
.pic-wrap {
幅: 220ピクセル;
高さ: 220px;
境界線: 1px実線 #F00;
/*標準ブラウザシミュレーションのテーブル中央揃え*/
表示: テーブルセル;
垂直位置合わせ: 中央;
テキスト配置: 中央;
/*フォントと行の高さによってコンテナが拡大するのを防ぐ*/
フォントサイズ: 0;
行の高さ: 1;
*表示: ブロック;
+行の高さ: 220px;
_font-size: 192px; /* フォントサイズはheight/1.14に等しい */
_フォントファミリー: サンセリフ;
}
.pic-wrap画像{
display: inline; /*画像はインライン要素である必要があります*/
垂直位置合わせ: 中央;
}
</スタイル>
<本文>
<div class="box">
<a href="" class="pic-wrap" target="_blank">
<img src="http://img01.taobaocdn.com/tps/i1/T1LZ.8XdVcXXcb7DQt-185-205.jpg" alt="ソース xxx" title="ソース xxx">
</a>
</div>
</本文>
</html>

図に示すように、3 つの異なるサイズの画像が表示されます。ここでは、画像は画像の親要素コンテナーのサイズを超えません (開発者が出力データ画像の最大サイズを制御できる場合があり、画像は自動的に比例して拡大縮小されます)。