Table rendering problem in IE9
I'm not certain the problem is with IE9 and not other browsers, but I think that's a safe starting assumption.
When viewing this web site in IE9开发者_StackOverflow中文版, I get a black horizontal line between the rows of the main layout table. This is not visible in Firefox 4 and Chrome.
The body background is black, so I'm assuming there is a small gap between each of the rows. The table declaration includes the following attributes, and there are no CSS rules in effect.
border="0" align="center" cellpadding="0" cellspacing="0"
What is most likely to be causing this?
The problem is that you have too much text in the cell with rowspan. It simply forces the table to be higher so that the images aren't high enough to cover their cells.
If you want to fill the cell with text to get the last paragraph exactly at the bottom (or just to use all of the available space in the cell), then you have to set the exact size of every element in the cell to override the different margins, paddings and line heights that different browsers have.
Another alternative to put a paragraph at the bottom is to use absolute positioning. Then the layout is not as sensetive to variations between browsers.
And, as John pointed out, you should of course have a doctype on the page so that it renders in Standards Compliance Mode instead of Quirks Mode, that will also help to reduce the difference between browsers.
try to add
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
on the first line of html document, or just :
<!DOCTYPE html>
it may help
精彩评论