top


総投稿数 本 
no_

スポンサーサイト

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

css/ie6/ie7:実践利用メモ(2009/11/01追加) ・・・ 【Web開発メモ】

 2009-11-01
※実際に遭遇したものをまとめてゆきます。

**********************************************************
●よく使う、ie6/ie7 対応 css処理
**********************************************************


 □基本ハック方法


  ・cssで通常定義した後に、
* html #(id名){
/* ie6 対応処理 */
}
*:first-child+html #(id名){
/* ie7 対応処理 */
}
 で、ie6用の対応を記述
   ※参考として
    さらに細かくは、HTML上で分岐。
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie-style-sheet.css" />
<link rel="stylesheet" href="****/ie6.css" type="text/css" media="screen" />
<![endif]-->
<!--[if gt IE 6]>
<link rel="stylesheet" href="****/ie6more.css" type="text/css" media="screen" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" href="****/ie7less.css" type="text/css" media="screen" />
<![endif]-->
 など
    ( Thanks to Confessions of a style sheet hacker )

 


 □部分ハック方法


  ・プロパティ個別で、
.(クラス名) {
_background:#777777 /* アンダーバー:ie6 対応処理 */
*width: 320px; *height: 700px; /* *接頭辞:ie6,ie7 対応処理 */
}
 など
    ( Thanks to 逆引きCSSハック(IE8,Firefox,Opera,Safariを含めたブラウザ別CSSハック) )

 


 □基本バグ対応


  □マージンが倍の長さに(ie6)


#(id名){
margin:4px 10px 6px 16px;
}
* html #(id名){
margin:2px 5px 3px 8px;
}
 でもいいけど、
#(id名){
margin:4px 10px 6px 16px;
display: inline;
}

 


  □IE6においてXML宣言させない


   ・<!DOCTYPE宣言よりも前に文字列
    > IE6は互換モードで処理
<?
$ua = $_SERVER['HTTP_USER_AGENT'];
if (
!(ereg("Windows",$ua) && ereg("MSIE",$ua))
||(ereg("MSIE 7",$ua))
||(ereg("MSIE 8",$ua))
){
echo "<?xml version='1.0' encoding='UTF-8'?>\n";
}?>
 ※ie7以降以外のieは、XML宣言をはずす
    ( Thanks to IE6でのXML宣言の問題と回避方法 )

※遭遇するごとに更新してゆきます。

 


  □リスト(<li>)で、余分に改行される(ie6)


* html #(id名) li{
margin:0; padding: 1px;
}
 padding: 1px; を加える。

 


**************************************************
 【リファレンス
スタイルシートリファレンス(目的別)
スタイルシート / CSSリファレンス
とほほのスタイルシート入門
 【CSSハック
CSSハック一覧
逆引きCSSハック(IE8,Firefox,Opera,Safariを含めたブラウザ別CSSハック)
 【CSSチェック
CSS Validation Service
XHTML-CSS Validator
 【ブラウザチェック
Browsershots
IETester


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


commentsコメント
comment_post












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

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

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

 

リンク集

 

最近の記事

 

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

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

 

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