角丸JavaScript

TiKiのデザイン見直しの過程で、Div要素の角を丸めるJavaScriptを使ってみました。試したのは、Rico, Nifty Cube, curvyCornersの三つです。どれも子供にfloat要素を持つDiv要素を扱う場合に注意がいるようです。結局、Nifty Cube は上手く描画できず、curbyCornersは描画できるものの角丸の指定パラメータに欲しかった機能がなかったので、諦めました。

最終的に使ったのはRicoですが、floatの子を持つDiv要素を丸める場合はコツが要りました。ソースを追っていないので、常にそうなるのかわかりませんが、Ricoは角を丸める Div要素にheight属性があっても、それを無視してDiv要素の子の高さと同じ高さで四角形の下辺の角丸を描画するようです（親の高さに500を指定しても、子の高さが300だと、高さ300の位置に丸くなった角が描かれる）。このため、親要素と子要素の間に、もうひとつDiv要素を挿入して、その要素に本来親要素に設定するはずだった height属性の値を設定すると、うまくいきました。Ricoのコードをいじれば、こんな工夫は不要にできるのかな。

<div id='target'>
  <div id='target_inner'>
    <div id='child>・・・</div>
  </div>
</div>