code up

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jGrowl with IE6

jGrowlをIE6で使った際、常にドキュメントの右上とかに出てしまいスクロールしてると見えないという問題があった。

CSSやスクリプト内でIE6対応のコードはあるんだけど、それが複数クラス(div.ie6.top-rightとか)で指定されている。

でもIE6は不具合があって複数クラスは解釈できない、正確には最後に指定されているクラスしか認識しない。つまり、

div.ie6.top-right {
	right: 				auto;
	bottom: 			auto;
	left: 				expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: 				expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

というコードと、

div.jGrowl.top-right {
	right: 				0px;
	top: 				0px;
}

というコードはどちらも

div.top-right {
...
}

と解釈され、優先順位は等しくなる、つまり後に出てきたコードが優先されることになる。

jGrowl 1.2.6のCSSでは、div.ie6.top-rightdiv.jGrowl.top-rightという順番で定義されているので、div.jGrowl.top-rightが使われる。div.ie6.top-right・・・出番なしである。

対応するには、jquery.jgrowl.cssを直接変更して、div.ie6.top-right/div.ie6.top-left/div.ie6.bottom-right/div.ie6.bottom-left/div.ie6.centerdiv.jGrowl.centerより下に移動させる。

もしくは(私はこっち)、ie6用のCSSを用意して、上記jGrowlのCSSより後に読み込ませる。

div.ie6.top-right {
	right: 				auto;
	bottom: 			auto;
	left: 				expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: 				expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

div.ie6.top-left {
	left: 				expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: 				expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

div.ie6.bottom-right {
	left: 				expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: 				expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

div.ie6.bottom-left {
	left: 				expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: 				expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

div.ie6.center {
	left: 				expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: 				expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
	width: 				100%;
}

これを例えばie6.cssというファイル名で保存しておき次のようにHTMLに書く。lteとしているのでie5にも適用されるがie5は確認してないです。

<link rel="stylesheet" type="text/css" href="css/jquery.jgrowl.css" media="screen, projection" />

<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
関連記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。