Misalignment of cell background/borders in different browsers
I have developed a nice table frame with css and graphics. It uses background-image slices for a 3D heading and simple css borders for the rows.
The problem is that I need to align the borders with the headings and it simply won't work consistently in different browsers although I can't see why not.
In IE6 and IE7 it works OK
In IE8 and FF3.5 the left edge is out by one pixel
In Chrome 10 the right edge is out by one pixel
It seems the background image is not being placed fully to the edge of the heading cells, but it's hard to know even which browser to blame. Any suggestions appreciated.
A live demo of the problem is at: http://www.songtricks.com/TableBug.html
The HTML/CSS source is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
table.demo
{
margin:0px;
padding:0px;
border-collapse:collapse;
}
table.demo tr
{
padding:0px;
border:none 0px transparent;
}
table.demo th
{
border:none 0px transparent;
border-bottom:solid 1px #cccccc;
padding:10px;
background:url(wfx_table_tm.gif) repeat-x left top;
}
table.demo th.left
{
padding:0px;
background:url(wfx_table_tl.gif) no-repeat left top;
}
table.demo th.right
{
padding:0;
background:url(wfx_table_tr.gif) no-repeat right top;
}
table.demo td
{
border:none 0px transparent;
bor开发者_如何学JAVAder-right:solid 1px #dfdfdf;
border-bottom:solid 1px #cccccc;
padding:8px;
}
table.demo td.left
{
border-left:solid 1px #b1b1b1;
}
table.demo td.right
{
border-right:solid 1px #b1b1b1;
}
</style>
</head>
<body>
<table class="demo">
<tr>
<th class="left">Left</th>
<th>Center</th>
<th class="right">Right</th>
</tr><tr>
<td class="left">Left</td>
<td>Center</td>
<td class="right">Right</td>
</tr>
</table>
</body>
</html>
Try border-spacing:0 instead of border-collapse:collapse at the table.demo level.
If it breaks ie6/7 then you can include the border-collapse in a conditional CSS reference.
Your problem is that you're using a background image to simulate the border-right for th.right. The background image goes inside the border area whereas the <td> immediately below it has a real border of 1px; the browser is making the <th> and the <td> the same inner width to line up the columns but the <td> appears 1px wider because it has a real border-right of 1px. Your border-collapse: collapse is hiding the width issue in the other cells.
The solution is to use your background image as a background image and a border for the border. Or, use the background image trick to put right and left borders on the <td> elements.
加载中,请稍侯......
精彩评论