一定期間更新がないため広告を表示しています
2014.08.06 Wednesday
一定期間更新がないため広告を表示しています
-||-|-|by スポンサードリンク
2008.10.14 Tuesday
この記事で対象としているのは、curvyCorners 最新バージョン 1.8(2008年10月14日現在)IE です。
curvyCorners とは何か?については書きません。
何故ならかなり前から登場していて、散々書かれてきた内容だからです。
その所為か、ここ最近のバージョンについての記事が見つかりません。
IE で curvyCorners(最新バージョン 1.8)を使ったページを見ると、下のエラーが発生し、corner が適用されません。
引数が無効です。(Invalid argument.)
corner を適用する要素にボーダーがあり、top, bottom の左右の角に false、もしくは半径の値に 0 が代入されている場合にこのエラーが発生します。
jquery.curvycorners.source.js の 264 行目青で示した部分に原因があります。
$(contentContainer).css({position:"relative", 'float':"left",width:"100%", "margin-top":"-" + (topMaxRadius-borderWidth) + "px", "margin-bottom":"-" + (botMaxRadius-borderWidth) + "px"}).addClass = "autoPadDiv";
jQuery をご存知の方なら CSS を操作しているのだと一目で分かると思います。
問題は margin-top, margin-bottom に設定しようとしている値です。
この値がパースエラーを引き起こし、落ちてしまうのです。
値は必ず -(マイナス)になる点に注目して下さい。
次に変数を簡単に説明します。
topMaxRadius = tl, tr 一番半径が大きい値
例えば div 要素にボーダー幅 1px で、tl が 8、tr が 6 の corner を適用すると、変数 topMaxRadius には 8 が入り、margin-top の値はこの様になります。
botMaxRadius = bl, br 一番半径が大きい値
borderWidth = ボーダー幅
"margin-top":"-" + (8-1) + "px"
分かりやすく書き直します。
"margin-top":"-7px"
しかし、topMaxRadius から borderWidth を引いた値がマイナスになった場合どうなるのでしょうか。実はこれがエラーの原因に繋がっているのです。
tl, tr 両方の値が false だと想定して説明します。
左右の角が false だと、半径の値が自動的に 0 となる為、topMaxRadius も 0 が代入されます。
この状況で margin-top の値を求めると、下記の様になります。
"margin-top":"-" + (0-1) + "px"
分かりやすく書き直します。
"margin-top":"--1px"
見て分かるとおり、--1px なんて値は CSS で使えません。
無理に使えばパースエラーを引き起こします。
つまりこれがエラーの原因なのです。
(Firefox 等でもこのパースエラーは表示されます)
もちろん bl, br に false や半径を 0 としても同様にエラーが起きますので注意が必要です。
●元ファイルをいじる
$(contentContainer).css({position:"relative", 'float':"left",width:"100%", "margin-top":topMaxRadius - borderWidth <= -1 ? 0 : -(topMaxRadius - borderWidth) + "px", "margin-bottom":botMaxRadius - borderWidth <= -1 ? 0 : -(botMaxRadius - borderWidth) + "px"}).addClass = "autoPadDiv";
青で示した様に書き換えれば、今まで通り使用できます。
jquery.curvycorners.packed.js を使われる方は、変数名が違いますので注意が必要です。
"margin-top":"-"+(x-n)+"px","margin-bottom":"-"+(y-n)+"px"
上の一文を検索して、下に書き換えて下さい。
"margin-top":x-n<=-1?0:-(x-n)+"px","margin-bottom":y-n<=-1?0:-(y-n)+"px"
●設定値で何とかする
苦肉の策ですが、角丸にしたくない部位には false や半径に 0 を設定するのではなく、半径に 1 を設定してください。上述の例を変えるのであれば、下の様に書き直せます。
$("div#test2").corner({ tl : { radius : 1 }, tr : { radius : 1 } });
radius が 0 と 1 の場合では、やはり見え方が違います。
しかし、元のソースを直す以外でしたら恐らくこれしか方法はないかと思います。
この件について書かれている方が海外にいらっしゃいますね。
curvyCorners does not work in IE7 throws "Invalid Argument" error
ちなみに 2007年3月時点の curvyCorners には、パースエラーによるバグはありませんでした。
margin-top, margin-bottom 以外にもパースエラーを引き起こすプロパティがある様です。
JavaScript|03:45|comments(0)|trackbacks(0)|by ニノミヤ カズノリ
page top▲ | 1/1PAGES |
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | |