CSS and Internet Explorer incompatibility_问答_开发者

CSS and Internet Explorer incompatibility

开发者 https://www.devze.com 2023-01-26 16:26 出处：网络

I\'m really struggling with a page开发者_StackOverflow that looks great in Firefox and Chrome, but looks like absolute crap in IE.

相关专题：css

I'm really struggling with a page开发者_StackOverflow that looks great in Firefox and Chrome, but looks like absolute crap in IE.

I am clearly missing something, but I am not extremely familiar with the compatibility issues between browsers when it comes to CSS. Can anyone give me a tip?

Page with the issue.

the index page looks fine! which really is throwing me for a loop...

Thanks in advance

Your page has no doctype, so IE is falling back to quirks mode.

Try adding this above the html tag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

First of all this is a malformed HTML <head> <body> </head> <body>, make it <html> <head> <scripts .../></head> <body> </body></html>. This will make your second page look like first one.

I added an XHTML DTD to fix the center alignment <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">. This will make your first page also look more like chrome and Firefox.

Finally you are using HTML5 tags <header> and <nav>. HTML5 is not fully supported in IE, firefox chrome supports it partially. I would rather be skeptical in using them now or at least test in all browsers. Although I see you have added one js for simulating HTML5 in IE. Put that js before body. But its interesting how it simulates HTML5 :).

Are you using a CSS reset? This is the CSS reset I'm using: http://meyerweb.com/eric/tools/css/reset/ but there are other variations that are useful too.

Will help fix most browser incompatibility issues. ;)