管理しているホームページに久しぶりに手を加えた。主にCSSとJSを。
CSS+JSでタブらしきものを実現しようとしたわけですが、タブらしさをだそうと、角丸をつくろうとして難儀しました。
左上、右上の角をそれぞれ丸くしたんですが、
/* CSS3 */
border-left-radius: 12px;
border-right-radius: 12px;
では、
という結果に。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;
としたところ、
という結果に。OperaはIE同様に未対応なのか...?
専用の記述法にはクセがあり、ホントにビミョーな差異が。
最近はJS,CSS触る機会多いですが、ブラウザ間の解釈の違いに戸惑いますね。足並みが揃うといいんだけどなぁ
