当我添加 <!doctype html> 到我的页面，CSS似乎不起作用，页面看上去更糟
[英]When I add <!doctype html> to my page the CSS doesn't seem to work and the page looks worse
问题描述
我的问题是在Firefox和chrome上，我的网站在怪癖模式下看起来不错，但在IE中却不行。 我意识到我应该添加到页面的开头并从那里开始-但是，当我这样做时，该网站在所有浏览器中看起来都是相同的，但并不是我想要的那样。
这是我的DOCTYPE网站，这是我的古怪模式的网站，这就是我希望它的外观（在chrome / firefox中）
这是我的CSS问题吗？ 我已经验证过，没有发现错误！
这是我的CSS： http : //www.biolonline.co.uk/mystyle.css
1 个解决方案
解决方案1
4 2012-07-21 22:53:52
问题是（正如您在标签中正确猜到的）一个叫做Quirks Mode的东西。
如果您编写的网站没有doctype，浏览器将以Quirks模式呈现它。 从本质上讲，这是浏览器的一种模拟模式，可以伪装成与旧网站兼容的旧版浏览器。
没有简单的方法可以解决此问题：如果您设计的站点在怪癖模式下看起来不错，那么您做错了，您将必须对其进行修复。
不能将其保留为怪癖模式，因为IE在此模式下对其他所有人的呈现方式有所不同。 在具有或不具有doctype的其他浏览器中，您的网站看起来都会损坏。
不好意思，不好意思。
怪癖模式和标准模式之间的主要区别是“框模型”。 这定义了如何根据框的宽度和高度来处理边距和边界。 在怪癖模式下，边距和边框位于框内，因此width是框占用的整个空间，而在标准模式下，边距和边框被添加到框外，因此框总共占用的空间为width加上两侧的margin和border 。 这显然对页面布局有很大的影响。 还有其他差异，但这是最会给您造成问题的差异。
有一个CSS功能，称为“ box-sizing” 。 这样，您便可以在标准模式下在上述两种模式之间切换盒式模型。
这实际上是最适合您的解决方案：您只需要简单地将box-sizing:border-box; 放入CSS中的每个元素（使用*选择器），问题就解决了。
不幸的是，仅在最新版本的IE中支持box-sizing 。 如果您需要支持IE6或IE7，那么您就不走运了。 如果最低的浏览器是IE8，则可以使用它，这将解决大多数怪异模式的布局问题。 不是全部，而是大多数。
希望能有所帮助。
我加 <!DOCTYPE html> 它破坏了我的代码，没有它，它会完美地工作
[英]I add <!DOCTYPE html> and it breaks my code and without it it work perfectly
我的CSS现在无法使用， <!--nextpage--> 分割我的页面
[英]My CSS doesn't work now that I used a <!--nextpage--> to split my page
我的html css在Codepen中运行良好，但是当我在Chrome环境中打开时，它看起来不对
[英]My html css work fine in Codepen but doesn't look right when I open in my environment on Chrome
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
当我使用电话视图时，我的 html 页面看起来很奇怪
我的CSS除网站上的一页外不起作用
我加 <!DOCTYPE html> 它破坏了我的代码，没有它，它会完美地工作
我的CSS现在无法使用， <!--nextpage--> 分割我的页面
在CSS中对齐不能与另一个HTML页面的按钮一起使用
当我添加 <!DOCTYPE html> ，div测量不起作用
当我添加时，部分样式不起作用<!DOCTYPE html>
HTML，CSS：表格不会使我的页面相应调整大小
我的html css在Codepen中运行良好，但是当我在Chrome环境中打开时，它看起来不对
<!DOCTYPE html> 打破我的页面！ 为什么？
相关标签