久しぶりにie6でレイアウトが崩れたので復習

IE6はCSSの解釈がおかしい

CSSの解釈がおかしいためレイアウトが崩れ

 

ボックス幅の解釈

div#box{
	width:100px;
	border:1px solid black;
	padding:5px;
}

ボックス全体の幅は112px→IE6では全体で100pxとなります。

【対策】widthとpadding、borderを一緒に使わない

div#box1{
	width:100px;
}
div#box2{
	border:1px solid black;
	padding:5px;
}

例えば分けて指定

floatで回り込むとmarginが2倍に

div#box{
	float:right;
	margin-right:20px;
}

通常は20pxが、IE6の場合40pxとなる

【対策】 marginとfloatを使うときはdisplay:inline;を忘れずに

div#box{
	float:right;
	margin-right:20px;
	display:inline;
}

 

floatでボックスを回りこませてmarginで間隔を開けるときはdisplay:inline;をお忘れなく。

IE6のCSS対策の最終手段CSSハック

 

.sample{
	width: 100px;
	_width : 120px;
}

この場合、IE6以下のみ120pxとなり、他のブラウザでは100px

.sample{
	width: 100px;
}
* html .sample{
	width : 120px;
}

こちらも同じで、IE6以下のみ120pxとなり、他のブラウザでは100px

ロリポップで.htmlのままphpを動かす

ロリポップの場合、拡張子htmlのままPHPを動作させるには

「.htaccess」内に

AddHandler php5.2-script html

さらに、ロリポップのコンパネのphp.iniの設定で

ショートオープンタグをオフに設定すると

xhtmlで作成されたファイルでもXML宣言をしたままPHPを使えます。

php_flag short_open_tag Off


.htaccess リダイレクト

.htaccess を用いたリダイレクト

A.htmlへのアクセスをB.phpに転送する

一定の場所に.htaccessをおくだけで A.html へのアクセスが自動的に B.php に転送されます。

.htaccess でリダイレクト

RedirectPermanent URL-path URL

使用例

ブログフォルダにあるblog.htmlをサイトのトップページにする場合

RedirectPermanent /blog/blog.html http://user-domain/index.php



Flashの上に画像 swfファイルの上に画像

画像の上にswfがかぶらないようにする方法
文字の上にswfが被らないようにする方法
Flashの上に画像swfファイルの上に画像
横メニューの下にフラッシュを表示させているサイトの場合
メニューをドロップダウンで作成しているとフラッシュで隠れてしまうことがあります。
なんとか、レイヤー的にメニューが上かswfファイルか上か出来ないものだろうか。
■Flashの上に画像
■swfファイルの上に画像
xhtmlの場合、下記の param 要素を object 要素内に追加します。
<param name="wmode" value="transparent">
htmlの場合、 embed 要素に wmode 属性を追加します。
wmode="transparent"
このような感じです。
<object>
<param name="…" value="…" />
<param name="…" value="…" />
<param name="wmode" value="transparent">
<embed src="…" wmode="transparent" />
</object>