border-style デコらないボコらない・・

質問

border-style の inset と outset ですが、
IEで見ると groove と ridge に近い感じになります。
表現しづらいのですが、２段になってるというか・・。

Firefox でこれらを見ると、思った通りにデコっててボコってます。
（段がない）

なんとかIEで見ても同じようにはならないものなのでしょうか？
やはり解釈の違いとなってしまうのでしょうか・・。

よろしくお願いします。

回答No.2

神崎 渉瑠（@taloo） · ベストアンサー

この現象でしょうか。
http://www.mozilla.gr.jp/standards/webtips0011.html
ここに書かれているとおり、面倒ですが、
border-top, right, bottom, leftをそれぞれ個別に指定することで対応できると思います。

お礼

できるみたいですね。やってみたいと思います。ありがとうございました。

回答No.1

abril

以下は以前別のスレッドで類似の質問に回答した時の文章ほぼそのままなんですが（手抜きですみません）。

border-styleプロパティで実装される「線の形状の見え方」というのは、値がsolidの場合を除いて、環境によって結構異なります。点線・波線・二重線等でも微妙なスタイルの違いがあるのですが、いずれも元々それぞれの環境（ブラウザ）に依存するものです。特に、このoutsetやinsetなど、線に立体感がつくスタイルは顕著に違いますね。ハイライトの当たり方の解釈が異なる為、その結果形状や色が変わって見えるのでしょう。一辺ごとにカラーを微妙に変えるという微調整もあるのですが、それは結局あちら（IE）を立てればこちら（Firefox）が立たず、というシーソー状態にもなってしまいます。ですので、border-styleプロパティによる装飾を使われる場合は各ブラウザの差異を納得の上で行うか、より表示結果の差の少ないスタイルを適用するか、ですね。
どうしても線の形状に拘りがある様であれば残念ですが後は「画像」にして組み込むしかないですね。

お礼

Firefoxでの解釈のほうが、borderで囲まれた部分がよりくぼんでたり、よりでっぱてたり感が強いです。
IE7.0になったときそういうことは加味されなかったのでしょうね。
どうしてもであれば画像にしますが、画像であれば他のにするかもしれません。
ご回答ありがとうございました。