html - IE8 doesn't respect CSS rule overriding -
i have spent last 2 hours on , have no idea what's wrong , how fix it.
let's assume following html:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ie8 test</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="mydiv"> <p>first line - bla bla bla bla bla bla bla bla bla</p> <p>second line - bla bla bla bla bla bla bla bla bla</p> <p class="red last">third line - bla bla bla bla bla bla bla bla bla</p> </div> </body> </html> and css:
@charset "utf-8"; #mydiv { border: 1px solid green; } #mydiv p { text-align: center; } #mydiv p:first-child { text-align: left; } #mydiv p.last, #mydiv p:last-child { /* doesn't work in ie8 */ text-align: right; } .red { color: red; } obviously, should center text in div, put first line left , last line right. works flawlessly in newer browsers ie8 fails (oh surprise...).
seems not respecting #mydiv p.last, #mydiv p:last-child. added class="last" ie8 doesn't know last-child anyway, text-align:center not overriden text-align:right. has idea how fix it? need working in ie8. lot!
you should leave #mydiv p.last in selector. :last-child selector expression not recognized ie8, ignores whole rule (as potentially invalid).
it's general rule of thumb (prescribed the standard): browser can't understand selector => browser ignores (along corresponding rule).
Comments
Post a Comment