When I add <!doctype html> to my page the CSS doesn't seem to work and the page looks worse
Question
My problem is that on firefox and chrome my website looks fine in quirks mode, but not in IE. I realise that I should add to the start of my page and go from there - but when I do this the website looks the same in all browsers, but not as I want it to.
Here is My website with DOCTYPE and here is My website in quirks mode which is how I want it to look (in chrome/firefox)
Is this a problem with my CSS? I have validated it and no errors were found!
Here is my CSS: http://www.biolonline.co.uk/mystyle.css
1 answers
solution1
4 2012-07-21 22:53:52
The problem is (as you rightly guessed in the tags) a thing called Quirks Mode.
If you write a site without a doctype, browsers will render it in Quirks mode. This basically an emulation mode for the browser to pretend to be an older browser for compatibility with old websites.
There's no easy way out of this: If you've designed your site to look good in quirks mode then you've done it wrong and you're going to have to fix it.
Leaving it in quirks mode isn't an option because IE renders differently in this mode to everyone else; your site will look broken in other browsers with or without the doctype.
Sorry to bear bad news.
The main difference between quirks mode and standards mode is the "box model". This defines how margins and borders are treated in terms of the box width and height. In quirks mode, the margin and borders are inside the box, so the width is the entire space the box takes up, whereas in standards mode, the margins and borders are added outside the box, so the space the box takes up in total is the width plus the margin and border on either side. This obviously has a big impact on the page layout. There are other differences, but that is the one which will cause the most problems for you.
There is a CSS feature called 'box-sizing' . This allows you to switch the box model between the two modes described above, while staying in standards mode.
This is actually the perfect solution for you: All you need to do is simply put box-sizing:border-box; into your CSS for every element (use the * selector), and problem solved.
Unfortunately, box-sizing is only supported in more recent versions of IE. If you need to support IE6 or IE7, then you're out of luck. If your lowest browser is IE8, then you can use it, and this will solve most of your quirks mode layout problems. Not all of them, but most of them.
Hope that helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.