Inconsistent table borders with FireFox
I have some tables which render fine in IE and Chrome. But in Firefox some of the border arbitrarily don't show or have different widths. You can see an example Here. Below is the relevant css:
table {
font-size: 1.0em;
border-collapse: collapse;
border: 3px solid #004C87;
margin: 5px 5px 5px 5px;
}
th, td {
padding-top: 7px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
border: 1px solid #004C87;
text-align: left;
vertical-align: top;
line-height: 1.3em;
}
In the image below I took screen shots as it renders in the different browser开发者_如何转开发s. The black arrow depicts the situation where the line/border does not show. The red arrow illustrates situation where the width is different.
If I were to repeat these tables the occurrences would be arbitrary.
I had an issue where borders were appearing when they shouldn't have been. I resolved it with this:
border-collapse:separate;
I know it's not the direct answer, but the search brought me here.
I'm posting this as the answer as I'm convinced at this point you must be just a little zoomed out in Firefox. Try pressing Ctrl+0
If you compare the two tables in the image you provided, you can see that the bottom one is slightly larger than the top one.
精彩评论