border collapse not working in IE10

问题

Has anyone come across a solution for border collapse on tables not working in IE10?

I have tables on web sites used where needed, and they display fine in all other browsers, but Since IE 10 the borders are way to thick.

any help appreciated

回答1:

Above question may be a few months old, but today I've ran into the same problem and thought I could at least provide some possible solution, even though it's not an ideal one.

As the problem describes, using border-collapse causes a thick border in IE10, even though there are no borders that would add up. When leaving out border-collapse, the border-width remains its normal thickness. However, leaving out border-width results in space between cells.

The only possible alternative to get the desired result is to not use border-collapse at all. Instead, use 'border-spacing:0px;' to get rid of the spaces between cells and define borders very specifically.

Example:

This

table{
    border-collapse: collapse;
}
table td{
    border: 1px solid black;
}

Would become

table{
    border-spacing: 0px;
    border-top: 1px solid black;
    border-right: 1px solid black;
}
table td{
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}

Like I said before: it's not ideal, but at least it would give the desired cross-browser result.

Note: the problem in IE10 only occurs when using a border-width of 1px. A border-width of 1px will result in 2px when using border-collapse:collapse; in IE10. When using a higher border-width, the result will be normal.

来源：https://stackoverflow.com/questions/16682591/border-collapse-not-working-in-ie10

标签

border

internet-explorer-10

collapse