IE

[MooTools] border-radiusの簡単なIE対策

by

角丸にする既存ライブラリは色々あるけどHTML5対応してなかったり配置が崩れたりで、
もう面倒だから四隅にspan置いて背景指定すればいいわ…と思って作ったクラス。

new IERadius($("main"));

角丸にしたい対象を指定すると、その要素内に次のようなspanが自動作成される。

<span class="radiusFix main-tLeft" style="position: absolute; width: 5px; height: 5px; display: block; top: 0px; left: 0px;"></span>
<span class="radiusFix main-tRight" style="position: absolute; width: 5px; height: 5px; display: block; top: 0px; right: 0px;"></span>
<span class="radiusFix main-bLeft" style="position: absolute; width: 5px; height: 5px; display: block; bottom: 0px; left: 0px;"></span>
<span class="radiusFix main-bRight" style="position: absolute; width: 5px; height: 5px; display: block; bottom: 0px; right: 0px;"></span>

コーナーだけの画像を作って、
radius_sprite

スタイルシートで背景指定する。

html {
	background-color:#113A57;
}
#main {
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
#main{
	background-color:#fff;
}

.radiusFix {
	background:url(../images/radius_sprite.png) no-repeat left top;
}

.main-tLeft{background-position:0px 0;}
.main-tRight{background-position:-5px 0;}
.main-bRight{background-position:-15px 0;}
.main-bLeft{background-position:-20px 0;}

指定した親要素にはposition:relativeが付与される。
positionを使うのでIE6でCSSのバグが発生する事がある。（floatが中にある要素に使った場合など）

左：使用後　右：使用前
radius_sprite_after

続きを読む

[IE] Internet Explorer 8 ドキュメント互換性モードの指定について

by

IE6のドキュメントタイプで表示が変わる互換性モードに頭を抱えたWeb業界の人は多かろうと思いますが、IE8で更に上位版が出たそうです。
でもIE6で悪行を働いた標準・互換モードの変更動作とは違い、IE8で導入されたドキュメント互換性は、
IEがページを表示する際に使用する特定のレンダリングモードの選択を可能にするもので、従来のDOCTYPEの変わりに
新しくMETA要素の X-UA-Compatible　により操作が可能に。

簡単にまとめると

IE8だと表示が崩れる…IE7なら崩れないのに…orz
▼
METAタグでIE7モードで表示するよう指示
▼
IE8がその指示に従ってIE7っぽくレンダリング
▼
ｳﾏｰ(ﾟдﾟ)

ということらしい。

その場合のMETAタグは次のようになる（Emulate IE7 互換性モードを指定）

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

このメタタグはヘッダーの一番上（titleや他のmetaよりも上）に置かなければならない。

その他のcontent 属性値

  • IE=EmulateIE5　→　Internet Explorer 5 の動作を模倣
  • IE=edge　→　使用できる最高のモードを使用
  • IE=EmulateIE8も使用可能
<meta http-equiv="X-UA-Compatible" content="IE=4"/>   <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5"/> <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100"/> <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a"/>   <!-- IE5 mode -->

各モードをセミコロンで区切って複数のドキュメント モードを指定することも可能らしい。
特定の互換性モードを除外する使い方も可能だが、推奨はされていない。

例：IE7 モードを除外

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />

一見便利そうだけど…用途がわからん……

※公式ドキュメントはこちら

でもやっぱりメインで確認するのはIE6なんだろうな、っていう。

続きを読む

[mootools] 透過PNGをIE6で自動的に表示させる　pingfix.js clone

by

必要に迫られて作ったIE Pingfix.jsのクローン
ページ内にある透過PNG形式画像をIEでも表示させるプラグインのmootools版です。
透過画像やAlphaImageLoaderについてはこっちの記事で詳しく書いてます→透過PNGと透過フィルターの使い方

適用する画像の判別はファイル名で行います。
背景は面倒なので未対応ですが、要素IDによる範囲指定が可能です。

やってる事は大体同じ

  1. 透過する画像を取得
  2. 画像の属性を取得(width,height,alt,src,class,id等)
  3. 新しい要素を作成（このクラスではspan）
  4. 作成した要素に画像の属性を当てる
  5. Style属性で作った要素をスタイリング（AlphaImageLoaderはここ）
  6. img要素を削除またはdisplay:noneにして作成した要素を挿入

続きを読む

[XHTML]buttonタグの挙動について

by

フォーム送信などするときに使うボタンはinputとbuttonがあります。
ボタン要素にもnameとvalueをつければ、ほかのフォームエレメントと同じように値を送信することが出来ます。

buttonタグだと、ボタン要素そのものにつける値とボタンに表示するラベルを違うものに出来るので、
送信ボタンとか作るときには便利なんですが、IEだけ挙動が違うので注意が必要です。

<input type="submit"  name="test" value="send" />

<button type="submit" name="test" value="send">submit</button>

続きを読む

[CSS]fieldsetにbackground指定するとIEではみ出す

by

fieldsetにbackground指定（color等）をしたとき、IEだけ上方向にはみ出して表示される。
原因はlegendにまで背景が適用されてしまうため。これはIEのバグらしい。

IEだけ背景なしにしてもよいが、そういうわけにもいかんという場合は、以下の方法で修正が可能。

続きを読む

[CSS]float解除ハックClearFix

by

親要素にfloatが使えない場合の解決策として使われる超有名ハック。
これ考えた人尊敬するわ。

このハックを使う主なケース。

  • margin:0 auto;で中央配置にしてるブロック要素の中でfloat指定するものを配置する
    （親要素にfloat指定することが出来ない状態）
  • liやdt、dlにfloatかけたから手っ取り早くクリアしたい
  • clear:bothとか置けない。もしくは置くのが面倒。置くと美しくない

大概は親要素にfloat指定するか、下にclear指定しとけばおｋだけど、たまにどちらも使えない場合がある。そんなときはこのハックを思い出すと幸せになれる。
使用するとIEで妙な隙間が出来る場合があるので注意。多分バグだろうけど。

続きを読む