CSS child selector doesn't work on ie9
i have a page like this:
<body>
<table width="100%">...</table>
<table width="100%">...</table>
<table width="100%">...</table>
<table width="100%">...</table>
</body>
what i need to do is making all those tables 85% width and horizontally centered on the page. it would be easy if the page was a single page but this needs to work on 100+ pages and the only thing they have in common is the stylesheet file. so i need to do this with css only. i can't cover the tables inside a div or use jquery.
what i tried is:
body { text-align:开发者_如何学Pythoncenter; }
body > table { text-align: left; margin: 0 auto; width: 85%; }
this works perfectly on firefox and google chrome but it doesn't seem to work on ie9 (didn't tested but i'm sure it won't work with earlier ie versions)
i've tried lots of methods they wrote on similar questions but couldn't be able to solve this.
EDIT:
The doctype of the page was:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
i changed it to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
and it works on ie9 too now!
The updated question is: is it possible without changing the doctype?
As Yi Jiang says, your doctype declaration isn't correct. IE9 probably can't figure out what to do about that, so runs back and hides in its quirks-mode shell, where it becomes blind to the child selector (or, becomes 10 years younger).
The easiest and surely-recommended way is to change your doctype declaration in order to get it back to standards mode and apply the rule:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Otherwise you can try forgoing the child selector and try to reset styles on the rest of your tables using whatever default styles you'd like:
body { text-align:center; }
body table { text-align: left; margin: 0 auto; width: 85%; }
body * table { /* Styles for other tables */ }
But as you see, the * selector there doesn't look very friendly, so changing the doctype is definitely the better path to take.
I put together this jsfiddle and it looks like it works on IE9:
http://jsfiddle.net/XFgLf/
加载中,请稍侯......
精彩评论