管理人Kのひとりごと

デジモノレビューやプログラミングや写真など

そこまで違うの...?

管理しているホームページに久しぶりに手を加えた。主にCSSとJSを。
CSS+JSでタブらしきものを実現しようとしたわけですが、タブらしさをだそうと、角丸をつくろうとして難儀しました。
左上、右上の角をそれぞれ丸くしたんですが、

/* CSS3 */
border-left-radius: 12px;
border-right-radius: 12px;

では、

  • Chrome6:◯
  • Fx3.6:×
  • Opera10.6:×
  • Safari5:×
  • WebKitブラウザ(HT-03A):×

という結果に。FxやChrome,Safariなどには専用の書き方があるらしく、

 /* Safari,Chrome */
-webkit-border-top-left-radius:12px;
-webkit-border-top-right-radius:12px;

/* Fx */
-moz-border-radius-topleft:12px;
-moz-border-radius-topright:12px;

としたところ、

  • Chrome6:◯
  • Fx3.6:◯
  • Opera10.6:×
  • Safari5:◯
  • WebKitブラウザ(HT-03A):◯

という結果に。OperaIE同様に未対応なのか...?
専用の記述法にはクセがあり、ホントにビミョーな差異が。
最近はJS,CSS触る機会多いですが、ブラウザ間の解釈の違いに戸惑いますね。足並みが揃うといいんだけどなぁ