ボーダースタイルのFirefoxとChromeの外観が異なる

Question

コードは以下のとおりです。私はこの問題に非常に困惑しています。

table td{ 
    padding:10px; 
    background:#415DA1; 
    border-top:solid 10px #F00; 
    border-right:solid 10px #CCC; 
    border-bottom:solid 10px #F00; 
    border-left:solid 10px #CCC; 
} 

<table> 
    <tr> 
     <td>Test</td> 
     <td>Test</td> 
    </tr> 
</table> 

のFirefoxとChromeの間apperance

は、それが異なるbrwosersの違いによってcousedだ場合、私はわからないんだけど、いくつかの違いがあります。 CSSで修正する方法はありますか？

例：http://jsfiddle.net/AndyE/B2fjn/

Answer 1

これは、境界線描画の実装が異なるだけです。私はサファリをテストしていない

が、私は、彼らが同じレンダリングエンジンを使用しているため、それはクロームと同じように見えることを期待したい：あなたは、IEとOperaの差があまりにもありますことに気づくでしょう。これは、残念ながら、あなたは—を解決するために、新たな問題を持っていることを意味し

table { 
    border-collapse: separate; 
} 

：ブラウザ間で一貫性のある境界線を得るために私は考えることができる

唯一の方法は、<table>要素にseparateにborder-collapseを設定することです各セル間の境界は、2x10pxになります。マークアップを変更したり、余分なCSSルールを追加することで、この問題を回避できます。例えば、私は次のようにCSSを変更：

table { 
    border-collapse: separate; 
} 

table td{ 
    padding:10px; 
    background:#415DA1; 
    border-top:solid 10px #F00; 
    border-right:solid 5px #CCC; 
    border-bottom:solid 10px #F00; 
    border-left:solid 5px #CCC; 
} 

table td:first-child { 
    border-left-width: 10px; 
} 
table td:last-child { 
    border-right-width: 10px; 
} 

デモ：http://jsfiddle.net/AndyE/B2fjn/1/

これは、おそらく最近のブラウザに期待することができますように良い結果をもたらすのではなく、 IE 6-8でとてもよく見える。可能な限り最良の結果が得られるまで試す必要があります。

Answer 2

境界（CSS）の正しい構文は次のとおりborder: 1px solid #FFF;。 さて、このようなあなたのCSSを変更：

table tr td{ 
    padding:10px; 
    background:#415DA1; 
    border-top:10px solid #F00; 
    border-right:10px solid #CCC; 
    border-bottom:10px solid #F00; 
    border-left:10px solid #CCC; 
} 

一部のブラウザでは、（あなたのような）何らかの問題がある場合は、CSSコードを修正する能力を持っているが、一部にはありません。新しいCSSコードが動作するかどうかを確認してください。表示されない場合は、ドキュメントを表示している両方のブラウザのスクリーンショットを投稿してください。ありがとうございました。