IE

[Google Analytics] 3年分のブラウザシェア推移を出してみた

2010/12/28 Memo No comments ,

まとりさんがTwitterで晒してた統計に便乗して自分のブログのをみてみたら、
なかなか面白かったのでもうちょっと細かく晒しておこうと思いますー。

データは直近1か月(11/26-12-26)が3年分です。

(さらに…)

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

2010/08/27 MooTools No comments , ,

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

2009/10/27 MooTools No comments ,

IE6 No More

Mootools版も作ってみますた。
IE6以下で閲覧しているユーザーに喧嘩を売る変更を促すダイアログを表示します。
DOMでアレコレするのでbody直下に公式のソースを書く必要はありません。

アラート

jQuery版及びWordpressプラグイン化したものはこちらで晒してます。
(さらに…)

[wordpress&jQuery] IE6 No More plugin

2009/08/07 plugin 7 comments ,

IE6 No More

IE6撲滅キャンペーン大好きなので早速プラグイン化してみた。
いずれも配布されているアラートを表示するものです。

アラート

Mootools版はこちら。

(さらに…)

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

2009/06/16 CSS 1 comment ,

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を無くすと一発で直るんだけどやっぱりバグなんだろうか