top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1121

IE6、IE7、IE8におけるCSSの違い:マイコミさんでの記事。元ネタも利用して、サンプル含めきれいにまとめておくか ・・・ 【CSS】

 2009-10-17
 マイコミジャーナルからの記事。
 ※マイコミさんは、時折こういう役に立つ記事掲載してくれるので
  ありがたい。いつも気にしてます。

IE6、IE7、IE8におけるCSSの違いまとめ
( by マイコミジャーナル )
IE6、IE7、IE8におけるCSSの違いまとめ※引用転載
 Net Applicationsの報告
 ・2009年9月におけるブラウザシェア
  ・IEが65.71%で過半数のシェアを確保
 ・バージョンごとにみると
  ・IE6 24.42%、
  ・IE7 19.39%、
  ・IE8 16.84%となっており、
  IE6IE7IE8のシェアが拮抗
 ・これまでのシェア変動から推測すると、
  今後数ヶ月の間は3つのバージョンのIEが
  似たようなシェアを持った期間が続く
 ・IEが第一シェアだといっても、
  結果的に3つのバージョンに対応する必要



 ・・・そうなんですよね。
    先日もあるお客さんからレイアウトが崩れていると・・・
    聞いてみると、IE6でした。

 この記事、とてもありがたいのですが、事例は無い。
 参照ネタの、
 ・CSS Differences in Internet Explorer 6, 7 and 8
  には、サンプルものっており、少しまとめて参照できる頁に
  しておくとするか。


  追記に ▼


FC2ブログランキング にほんブログ村 IT技術ブログ Webサイト構築へ ブログ王ランキング 人気ブログランキング 人気ホームページランキングへ


more

************************************************
◎ IE6、IE7、IE8におけるCSSの違い:CSS情報まとめ
************************************************


 ともかく整理。
 ※対応記述は、だめなものだけ、×。

 


 【セレクタと継承
  ■チャイルドセレクタ
   
/* div要素が親である、span要素(子) */
div > span { color: #fff; }

   ・IE6 ×
   ・IE7 × :親と子の間にHTMLコメントがある場合

 


  ■チェインクラス
   
/* クラスを並べてまとめて記述 */
.class1.class2.class3 { background: #fff; }

   ・IE6 × :IE6は一見サポートしているように見えるがそうではない

 


  ■属性セレクタ
   
/* input要素で、type属性の値が text のものだけ */
input[type="text"] { color: #0f0; }

   ・IE6 ×

 


  ■隣接セレクタ
   
/* <h1>要素直後の、<p>要素のみ適用 */
h1+p { font-size:12px; }

   ・IE6 ×

 


  ■間接セレクタ
   
/* <h1>要素以降の、<p>要素に適用 */
h1~p { font-size:12px; }

   ・IE6 ×

 


 【擬似クラスと擬似要素
  ■:hover擬似クラスに続く子孫セレクタ
   
a:hover span { color: #0f0; }

   ・IE6 ×

 


  ■チェイン擬似クラス
   
a:first-child:hover { color: #0f0; }

   ・IE6 ×

 


  ■非アンカー要素の:hover擬似クラス
   
div:hover { color: #f00; }

   ・IE6 ×

 


  ■:first-child擬似クラス
   
div li:first-child { background: blue; }

   ・IE6 ×
   ・IE7 × :HTMLコメントが最初の子要素の前にある場合

 


  ■:focus擬似クラス
   
a:focus { border: solid 1px red; }

   ・IE6 ×

 


  ■:before擬似クラス
  ■:after擬似クラス
   
#box:before { content: "メッセージ1"; }  
#box:after { content: "メッセージ2"; }

   ・IE6 ×

 


 【プロパティ
  ■ポジション指定からの仮想サイズ
   
/* 絶対ポジションにおけるtop、right、bottom、left指定で、width および height を提供 */
#box {
position: absolute;
top: 0;
right: 100px;
left: 0;
bottom: 200px;
background: blue;
}

   ・IE6 ×

 


  ■min-height, min-width, max-height, max-width
   
#box {  
min-height: 500px;
min-width: 300px;
}
#box {
max-height: 500px;
max-width: 300px;
}

   ・IE6 ×

 


  ■borderの透過指定
   
#box {  
border: solid 1px transparent;
}

   ・IE6 ×

 


  ■positionの固定指定
   
#box {  
position: fixed;
}

   ・IE6 ×

 


  ■background-attachmentの固定指定
   
#box {  
background-image: url(images/bg.jpg);
background-position: 0 0;
background-attachment: fixed;
}

   ・IE6 △ :root要素においてのみ動作

 


  ■inherit
   
/* 親要素(div)のスタイルを子要素(p)へ強制的に継承 */
div {
border: 1px solid #fff;
}
p.keisyou {
border: inherit;
}

   ・IE6 △ :directionとvisibilityに対してのみ動作
   ・IE7 △ :directionとvisibilityに対してのみ動作

 


  ■テーブルセルにおけるborder-spacing
   
table td { border-spacing: 3px; }

   ・IE6 ×
   ・IE7 ×

 


  ■テーブルにおける空セルの表示するempty-cells
   
table { empty-cells: show; }

   ・IE6 ×
   ・IE7 ×

 


  ■テーブルキャプションの縦方向ポジションcaption-side
   
table { caption-side: bottom; }

   ・IE6 ×
   ・IE7 ×

 


  ■クリッピングのエリア指定
   
#box {  
clip: rect(20px, 300px, 200px, 100px)
}

   ・IE6 △ :カンマを使わない非推奨の記述をする場合には機能
   ・IE7 △ :カンマを使わない非推奨の記述をする場合には機能

 


  ■orphans, widows, page-break-inside, outline
   
p { orphans: 4; }  
p { widows: 4; }
#box { page-break-inside: avoid; }
#box { outline: solid 1px red; }

   ・IE6 ×
   ・IE7 ×

 


  ■displayにおけるblock, inline, none以外の指定
   
#box {  
display: inline-block;
}

   ・IE6 ×
   ・IE7 ×

 


  ■white-space
   
p { white-space: pre-line; }  
div { white-space: pre-wrap; }

   ・IE6 ×
   ・IE7 ×

 


 【その他のテクニック
  ■@importに対するメディアタイプ
   
@import url("styles.css") screen;

   ・IE6 ×
   ・IE7 ×

 


  ■カウンタ値
   
h2 { counter-increment: headers; }  
h2:before { content: counter(headers) ". "; }

   ・IE6 ×
   ・IE7 ×

 


  ■クオート文字列の指定
   
q { quotes: "'" "'"; }  
q:before { content: open-quote; }
q:after { content: close-quote; }

   ・IE6 ×
   ・IE7 ×

 まだ、あまり普段利用しないものが多いけれど
  ・チェインクラス
  ・:hover擬似クラスに続く子孫セレクタ
  ・positionの固定指定
  ・displayにおけるblock, inline, none以外の指定
  ・@importに対するメディアタイプ
 の辺りは、要注意、かな。

commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1121-8b545395
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。