简体繁体 English

当我添加 <!doctype html> 到我的页面，CSS似乎不起作用，页面看上去更糟

[英]When I add <!doctype html> to my page the CSS doesn't seem to work and the page looks worse

原文 2012-07-21 15:10:14 4 1 css/ internet-explorer/ doctype/ quirks-mode

My problem is that on firefox and chrome my website looks fine in quirks mode, but not in IE. 我的问题是在Firefox和chrome上，我的网站在怪癖模式下看起来不错，但在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) 这是我的DOCTYPE网站，这是我的古怪模式的网站，这就是我希望它的外观（在chrome / firefox中）

Is this a problem with my CSS? 这是我的CSS问题吗？ I have validated it and no errors were found! 我已经验证过，没有发现错误！

Here is my CSS: http://www.biolonline.co.uk/mystyle.css 这是我的CSS： http : //www.biolonline.co.uk/mystyle.css

1 个解决方案

The problem is (as you rightly guessed in the tags) a thing called Quirks Mode. 问题是（正如您在标签中正确猜到的）一个叫做Quirks Mode的东西。

If you write a site without a doctype, browsers will render it in Quirks mode. 如果您编写的网站没有doctype，浏览器将以Quirks模式呈现它。 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; 不能将其保留为怪癖模式，因为IE在此模式下对其他所有人的呈现方式有所不同。 your site will look broken in other browsers with or without the doctype. 在具有或不具有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. 在怪癖模式下，边距和边框位于框内，因此width是框占用的整个空间，而在标准模式下，边距和边框被添加到框外，因此框总共占用的空间为width加上两侧的margin和border 。 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' . 有一个CSS功能，称为“ 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; 这实际上是最适合您的解决方案：您只需要简单地将box-sizing:border-box; into your CSS for every element (use the * selector), and problem solved. 放入CSS中的每个元素（使用*选择器），问题就解决了。

Unfortunately, box-sizing is only supported in more recent versions of IE. 不幸的是，仅在最新版本的IE中支持box-sizing 。 If you need to support IE6 or IE7, then you're out of luck. 如果您需要支持IE6或IE7，那么您就不走运了。 If your lowest browser is IE8, then you can use it, and this will solve most of your quirks mode layout problems. 如果最低的浏览器是IE8，则可以使用它，这将解决大多数怪异模式的布局问题。 Not all of them, but most of them. 不是全部，而是大多数。