Sunday, 15 March 2015

html - inside - is displayed incorrect in IE -



html - <div> inside <li> is displayed incorrect in IE -

here code:

<!doctype html> <html> <head> <style> li div { border: 1px solid #ff0000; width: 100px; position:relative; white-space: nowrap; overflow: hidden; } </style> </head> <body> <ol> <li> <div>111111111111111111111</div> </li> <li> <div>222222222222222222222</div> </li> </ol> </body> </html>

the page displayed not expected in ie8.

firefox: (ok)

ie8: (wrong)

could explain why?

if remove <!doctype html> ok, want find reason , prepare via css.

you can add together position relative 'li' tag , alter position relative absolute 'div' tag , add together 'top: 0; left: 0;' div tag.this work fine.

try css:

li { position:relative; } li div { border: 1px solid #ff0000; width: 100px; white-space: nowrap; overflow:hidden; position:absolute; top:0; left:0 }

html css internet-explorer doctype

No comments:

Post a Comment