articleList
27PNG画像による透過処理の実験 / Transparent PNG image processing experiments
26Apache インストールの注意点 / httpd-2.2.19 is Buggy software
25jQuery1.4以上のgetJsonエラーと対策/getJson's Error on jquery ver.1.4
24jQuery エラーの原因は、DivX Webプラグイン
23Lady Gaga の新曲リリースにあわせて、カウントダウンするWEBツール作りました。/ Free download countdown parts for Lady Gaga's new album.
22jQueryで上下スクロールの修正
21URIを引数からタイトルに変更しました。
20WIndows7 64bitOSへIE8-32bitの再インストール
19Illustratorで超高速WEBデザイン
18『Clear Fixの勧め』:CSS2の正しい処方![5]/ブラウザ間の表示差を無くす
17『Clear Bothのブラウザ別仕様』:CSS2の正しい処方![4]/ブラウザ間の表示差を無くす
16『Clear Bothの必要性』:CSS2の正しい処方![3]/ブラウザ間の表示差を無くす
15jQueryプラグインに挑戦^^
14jQuery実験:EASINGサンプルの応用「スライドメニュー」
13jQuery:実験-上下スクロール
12jQueryプラグインの実験-アニメのEasingサンプル
11『3ピクセルジョグ』:CSS2の正しい処方![2]/ブラウザ間の表示差を無くす
10『マージンの相殺』:CSS2の正しい処方!/ブラウザ間の表示差を無くす
9マルチポストスパム対策決定版!!
8404エラーの不明ファイルURIを取得する。
7サーバーへ連続アクセスの原因究明!!
6Movable Type3.33-ja の文字化けバグ解消。
5FireFox でGoogleMapが表示されない!!
4検索エンジン、インデックス登録にかかる時間は?
3タチの悪いウイルスにやられました。
2偶然発見しました(^^;) / MacIEをマウスでスクロール
1壊れたイラストレータファイルを復活!

digivalley0225
digivalley0225
11
『3ピクセルジョグ』:CSS2の正しい処方![2]/ブラウザ間の表示差を無くす [ 2009/01/02 12:25 ]
CSS2での段組では、Floatを使う方法と
position使う方法があります。
特にFloatに関してのブラウザ間のバグ・独自仕様は、
数え切れないほどあります。
その中で特に有名な『3ピクセルジョグ』と呼ばれるものに関して解説します。
■3 pixel Jog■
このバグは,
インライン要素をフロートで回り込ませようとする時
IE6以下についてのみ発生します。
ブロック要素同士のフロートや
IE7、モダンブラウザでは発生しません。
[症状]
下記をIE6とFirefoxの両ブラウザで比較してみてください。
■例題【1】3 Pixel Jog■
幅300pxのBoxの中に
Left Floatを設定した幅100pxのBoxと
回り込ませたい幅200pxの画像があります。
本来ならば、Firefoxで表示されるように
右の画像が回り込むべきなのに
IE6以下では周りこまずに落っこちたままです。
原因はIE6以下では3pxのマージンが自動的に設定されるからです。
実際に外側Boxの幅を3px増やして
303pxに設定してみると
IE6以下でもきちんと回り込むのが
はっきり確認できます。
外側BOXを3px増やしたサンプル
IE6専用にマージンを-3に設定したりするCSSハックの使用は根本的な解決ではありません。
ではこの症状の正しい処方は?
下記をどうぞ。
position使う方法があります。
特にFloatに関してのブラウザ間のバグ・独自仕様は、
数え切れないほどあります。
その中で特に有名な『3ピクセルジョグ』と呼ばれるものに関して解説します。
■3 pixel Jog■
このバグは,
インライン要素をフロートで回り込ませようとする時
IE6以下についてのみ発生します。
ブロック要素同士のフロートや
IE7、モダンブラウザでは発生しません。
[症状]
下記をIE6とFirefoxの両ブラウザで比較してみてください。
■例題【1】3 Pixel Jog■
幅300pxのBoxの中に
Left Floatを設定した幅100pxのBoxと
回り込ませたい幅200pxの画像があります。
本来ならば、Firefoxで表示されるように
右の画像が回り込むべきなのに
IE6以下では周りこまずに落っこちたままです。
原因はIE6以下では3pxのマージンが自動的に設定されるからです。
実際に外側Boxの幅を3px増やして
303pxに設定してみると
IE6以下でもきちんと回り込むのが
はっきり確認できます。
外側BOXを3px増やしたサンプル
IE6専用にマージンを-3に設定したりするCSSハックの使用は根本的な解決ではありません。
ではこの症状の正しい処方は?
下記をどうぞ。
3 pixel jog:CSS2の正しい処方
[ 2009/01/12 02:45 ]
回り込ませたいインライン属性をブロック要素(例えばDIV)で囲むか、強制的にブロック要素にし、
Float:left(右に回り込ませる場合)と横幅を設定します。
これですべてのブラウザで意図どおりにインライン要素を回り込ませることができます。
■CSS2の正しい処方サンプル-3 poxel jog■
/*↓処方CSSソース↓************/
ちなみにこの手法は、3 pixel jog だけでなく、すべての段組デザインで、ブロック要素インライン要素を問わず使用できます。
Float:left(右に回り込ませる場合)と横幅を設定します。
これですべてのブラウザで意図どおりにインライン要素を回り込ませることができます。
■CSS2の正しい処方サンプル-3 poxel jog■
/*↓処方CSSソース↓************/
#base
{
padding:10px;
margin:10px auto;
width:300px;
height:100px;
background: #aaa256;
}
.f01
{
float:left;
width:100px;
height:100px;
color: #0033CC;
background: #FF9999;
}
img
{
float:left;
display:block;
width:200px;
}
ちなみにこの手法は、3 pixel jog だけでなく、すべての段組デザインで、ブロック要素インライン要素を問わず使用できます。
-
Amazon.co.jp
詳解HTML&XHTML&CSS辞典私が使用している書籍の改訂版です。お勧めします。 Amazon で購入!
プライバシーについて
-
Amazon.co.jp
DOM Scripting 標準ガイドブック丁寧な解説というより、馬鹿丁寧、ある意味使い勝手悪すぎだけど、中身はとても良いです(^^;)!! Amazon で購入!
プライバシーについて
-
Amazon.co.jp
初めてのActionScript 3.0わかりやすい解説と最高のサンプルコード Amazon で購入!
プライバシーについて
-
Amazon.co.jp
詳解HTML&スタイルシート辞典使用している本です。廃本なので中古しかありませんが最高のXHTML1.0、CSS2.1の辞典。 Amazon で購入!
プライバシーについて
data
・・・・・・・・・・・・・・・・
■Apache サーバ ドキュメント■■アスキー デジタル用語辞典
■.htaccess実践活用術
■スタイルシート例文辞典
■Beginner's CGI
・・・・・・・・・・・・・・・・
Other Menu
prev
|
next
Date : 2009/01/02 12:25
Posted by valley | | Edit |
avater