タグ: 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件のコメント