Strange table alignment behavior in FF/Chrome
I've just isolated a strange behavior in FF3.5 and Chrome 10 which开发者_开发问答 explains why some of my tables aren't aligning as I expect.
When a CSS margin is set on the table (or via a general * selector) the align attribute no longer works.
I realise that align is deprecated now and that we should all be setting table alignment using the text-align style of the container, but sometimes it is still handy when you need different alignments of various content within a containing div.
IE (for once) seems to be the regular guy and is unaffected by the margin setting. Check it out at: http://www.songtricks.com/AlignBug.html
Here's the code - any thoughts?
<!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>
</head>
<body>
<table border="1" width="50%" align="center" style="margin:0px;">
<tr>
<td>Table with style="margin:0px;"</td>
</tr>
</table>
<table border="1" width="50%" align="center">
<tr>
<td>Table with no style</td>
</tr>
</table>
</body>
</html>
Im not sure how the align attribute works but it looks like when you apply a margin-top or margin-bottom to the style it doesn't seem to effect it. Only if you change the margin left and right properties it causes this bug. My guess is that the align property works the same as margin:0 auto. when I added auto for the left and right margins you get the desired outcome.
<table border="1" width="50%" style="margin:0px auto;">
<tr>
<td>Table with style="margin:0px;"</td>
</tr>
</table>
加载中,请稍侯......
精彩评论