Search code examples
cssborder

Different appearance between Firefox and Chrome of the Border style

Codes as below. I'm so puzzled of this problem.

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>

The apperance between Firefox and Chrome has some differences, I'm not sure if it's coused by the differences of different brwosers. Is there any way to fix it by CSS?

Example: http://jsfiddle.net/AndyE/B2fjn/

Solution

  • This is just differing border drawing implementations. You'll notice that there's a difference in IE and Opera too:

    enter image description here

    I didn't test Safari, but I'd expect it to look the same as Chrome since they use the same rendering engine.

    The only way that I can think of to get a consistent border across browsers is to set border-collapse to separate on the <table> element:

    table {
    border-collapse: separate;
}

    This, unfortunately, means you have a new problem to solve — there will now be 2x 10px borders between each cell. You can work around this by altering your markup or adding extra CSS rules. For instance, I changed the CSS to the following:

    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;
}

    Demo: http://jsfiddle.net/AndyE/B2fjn/1/

    This gives as good a result as you can probably expect in modern browsers, but doesn't look so great in IE 6-8. You'll need to experiment until you can get the best result possible.