タグ: IE

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

角丸にする既存ライブラリは色々あるけど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

“[MooTools] border-radiusの簡単なIE対策” の続きを読む→

By MooTools 、、コメントする

[IE7]不自然な横スクロールバーが出るバグについて

IE7だけで変な横スクロールバーが出たので調べてみたらどうやらバグみたいだったんだけど、発生条件が違ってたのでサンプル作ってみた。

IE7とその他のブラウザで比較してみて欲しい…
Sample »

  • 親要素(div#masthead)にposition:relative
  • さらにその子要素(p.description) に position:absolute　と　leftまたはright値
  • その子要素(p.description)内で改行している（またはdisplay:blockしてる要素がある）
  • font-style:italic;をスタイルシートのどこかで使っている（位置関係無し）
<div id="header">
	<div id="masthead">
		<p class="banner"><a title="HOME" class="siteName" href="index.html">Site Name</a></p>
		<p class="description"><strong class="i">Internet Exproler 7</strong><br/>
Scroller-x Bug Test</p>
	</div>
</div>

.i {font-style:italic;}

div#header {
	height:100px;
	background-color:#ccc;
}
#masthead {
	position:relative;
}
p.description {
	position:absolute;
	left:160px;
	background-color:#99FFFF
}

このケースだとleftをrightにするとさらに酷い事に…。
font-style:italicを無くすと一発で直るんだけどやっぱりバグなんだろうか

By CSS 、1件のコメント

[JS]window.open動作検証メモ

ブラウザ（とその設定）によってwindow.open()の挙動が大分違う件…
手持ちのＰＣに入ってるブラウザで検証してみたメモ。（win版のみ）

Firefox3（常にタブ）
window.option(href,name)だと新タブ、window.option(href,name,option)だと新窓

Firefox3（常に窓）
optionの有無にかかわらず新窓

Firefox2
3と同じ

Chrome
新窓で開く設定そのものが無い？（常に新タブで開く）

IE7・IE6
どうやら書き方で違うらしい

a.setProperty('onclick',"window.open(this.href); return false;");//→×
a.setAttribute('onclick',"window.open(this.href); return false;");//→×
a.setProperty('onclick',new Function('window.open(this.href); return false;'));</code>//→×
a.setAttribute('onclick',new Function('window.open(this.href); return false;'));</code>//→○
a.addEvent("click",function(){window.open(this.href);return false;});</code>//→○

※target=”_blank”だとsetProperty()でも開く
key同時押しはIE8でも継承されてるらしい

Safari3
開く。新規タブで開く場合はCtrl押しながら

Opera9（初期設定）
タブで開く。

未検証：
IE8　-インストールしてるPCが無い
SleipnirとLunascapeは省略
BETAとスタンドアロンはスルー

setPropertyで動作しないのは盲点でした

By Memo 、、コメントする

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

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なんだろうな、っていう。

“[IE] Internet Explorer 8 ドキュメント互換性モードの指定について” の続きを読む→

By Memo 、コメントする

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

必要に迫られて作った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にして作成した要素を挿入

“[mootools] 透過PNGをIE6で自動的に表示させる　pingfix.js clone” の続きを読む→

By MooTools 、、コメントする

IE3からIE7まで共存・同時起動させる

会社に新しい専用PCが届いたので、IE７のStandalone入れるついでに、
他ののバージョンも入れてみようと思ってMultiple IEを入れてみた。
Multiple IEはIE3、IE4.01、IE5.01、IE5.5、IE6がすべてパッケージングされており、個別・同時起動できるソフトです。

IE7と8は入ってないので必要ならそれぞれ別にインストールする必要があります。
あとMultipleIEに入ってるIEは英語版です。

デフォルトページが設定されてると、IE6以下を起動したときにエラー出まくりで落ちてしまうことがあるので
あらかじめインターネットオプションでホームページをabout:blankとかにして、
IE3は最初PC内にあるファイルをドラッグ&ドロップで起動するのがいいと思います。
IE4がなぜか起動できなかった。

このソフトIEがそのまま入ってるようなので、復元したいときにも使えるかも。

By Custom 、、コメントする

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

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

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

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

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

“[XHTML]buttonタグの挙動について” の続きを読む→

By HTML&XHTML 、、コメントする

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

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

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

“[CSS]fieldsetにbackground指定するとIEではみ出す” の続きを読む→

By CSS 、、、コメントする

[CSS]overflowとpositionを使うとスクロールできなくなる(IE)

外の要素にoverflow:autoなどを指定し、中の要素にposition:relativeを設定したとき、ＩＥではスクロールバーが出てもスクロールがされない。

IE6 bug with overflow and position:relative (2008-02-20)

どうやらバグらしい。
filter:alphaを使うときに、中の要素の透過防止にposition:relativeをするが、
そうするとoverflow:autoしてもスクロールしなくなってしまう。
回避策ないのかな…

By CSS 、、コメントする

GoogleMap IEだけ出るエラーの原因

GoogleMapを入れたページをブラウザで確認したとき、FireFoxやSafari、IE7などではエラーが出ないのに何故かIE6系のブラウザだけエラーを吐くことがある。

主なものは

  • ‘GMap’は宣言されていません
  • ‘G●●’は宣言されていません
  • ‘}’がありません
  • オブジェクトを指定してください
  • ‘return’ステートメントが関数の外側にあります

IE6以下で起きるこれらのエラーは、GoogleMapsを表示してるページの文字コードがShift-jisやEUCだと出ます。
これは表示するファイルの文字コードだけでなく、外部jsファイルの場合も当てはまるので外部jsファイルにgooglemapの関数を作ったときなんかも、文字コードをUTF8にする必要がある。

どうしてもUTF-8に出来ないという場合は、GoogleMapだけ入れたページを別のHTMLファイルに作成して、それをiframeで表示するのが手っ取り早いと思う。

文字コードをUTF8にしてもまだエラーになる。
他のブラウザでは見れるのに…なんて時は、次のポイントをチェックしてみてください。

  • 変数やオブジェクトの名前にエラーを引き起こす名称（classなど）が含まれていないか
    →適当なプレフィック(myClass)を付けたりクォーテーションで囲ったりして変更
  • オブジェクトや配列の最後の要素にカンマ付いていないか
    →{ 'key' : 'value', }　や [ 0, 1, 2, ]　は 『識別子、文字列または数がありません。』というエラーになります

※最近エラーに関する検索が多いようなので補足

GoogleMaps API V3はFirefox2やIE6などのレガシーブラウザをサポート対象外としているので、どうしてもエラーが消えない場合はV2を使う方が建設的です。

‘document.body’ は Null またはオブジェクトではありません。というエラーについてはこっちに書いてますが、scriptタグをbody閉じタグ前に移すと直るようです。

スクリプトの書き方が悪くてエラーを引き起こす場合もあります。こちらのGoogle JavaScript Style Guide（和訳）がとても参考になります。

※IEでマップを開くと「インターネットサイトhttp://maps.google.co.jp/を開けません。操作は中断されました」が出る件について補足

2010/10/15くらいから突如出始めたエラーのようです。（世界的に）
エラーが出たり出なかったりしているところを見ると、APIよりもIE側に問題があるように見受けられます。
このセキュリティ更新プログラムを当てたら直ったという報告がフォーラムにあったので引用しておきます。

英語版のフォーラムに情報がありました。
http://www.google.com/support/forum/p/maps/thread?tid=1a59afc1bb60d0c6&hl=en

以下のセキュリティパッチをインストールすると問題が改善されるようです。
MS10-071
http://www.microsoft.com/japan/technet/security/bulletin/MS10-071.mspx

ただし、上記のパッチは、WinXP SP3 用となっているので、 SP2 の人はインストールできないように見えます。
加えて、英語版フォーラムの情報によれば、このパッチのインストール後、いくつかのwebcomponent
(具体的にどんなものかはわかりませんが・・・）が動かなくなったと報告が挙がっています。
言うまでもありませんが、会社のPCに導入する際には動作検証など行なった上で導入してください。

By GoogleMap 、、コメントする