文档类型的更改导致网页呈现不同
我有一个以前没有文档类型声明的网页。
现在,我已将 添加到开头。不幸的是,现在它的呈现方式有所不同。
有一个 div 应该垂直填充页面;现在它只填充页面的上半部分(下半部分是空的)。
这是div的CSS:
#thediv {
float: left;
width: 48%;
height: 95%;
margin: 2px 2px;
}
我的问题:
- 如何让div再次垂直填充整个页面?(更重要)
- 是否添加
<!doctype html> 导致浏览器尝试将其呈现为 HTML5?
- 为什么更改 doctype 会导致这种差异?(不太重要)
I have a webpage that previously had no doctype declaration.
Now, I've added <!doctype html>
to the beginning. Unfortunately, it now renders differently.
There is a div that is supposed to fill the page vertically; now it only fills the top half of the page (the bottom half is empty).
Here is the div's CSS:
#thediv {
float: left;
width: 48%;
height: 95%;
margin: 2px 2px;
}
My questions:
- how do I get the div to fill the whole page vertically again? (more important)
- does adding
<!doctype html>
cause the browser to try to render it as HTML5? - why would changing the doctype cause this difference? (less important)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
您需要设置
和
标记(以及包含
#thediv
的任何其他标记)的高度也达到 100%:doctype 导致页面以标准模式而不是怪异模式呈现,我建议阅读 同名博客和文档类型页面。
这个问题的简短摘要是这样的:在互联网令人兴奋的日子里,当今天仍然没有浏览器高于版本 4 时,每个浏览器都通过不同来区分自己 - 而不是通过更符合规范。当浏览器制造商同意全部遵守时根据相同的规范,他们还决定继续支持构建网页的旧方法(怪异模式),以便旧页面仍然可以在新浏览器中正确呈现。这种怪异模式仍然内置于其中。大多数浏览器——当它们检测到一个看起来像是在那些令人兴奋的日子里构建的页面时,它们就会激活它。每个浏览器的检测和解决方法都不同 - 这里是 IE 8 的示例。
You'll need to set the height of the
<html>
and<body>
tags (and any other tags that contain#thediv
to 100% as well:The doctype causes the page to render in standards mode rather than in quirks mode. I recommend reading about quirks mode on the blog of the same name and on the doctype page.
The short summary of the issue is this: in the heady days of the internet when none of the browsers still around today were above version 4 every browser distinguished itself by being different - not by being more spec compliant. When the browser manufacturers agreed to all abide by the same spec they also decided to continue to support older ways of building web pages (the quirks mode) so that the old pages would still render properly in the new browsers. This quirks mode is still built into most browsers - they activate it when they detect a page that looks like it was built in those heady days. Each browser's detection and resolution method is different - here's an example of IE 8's.
如果没有
DOCTYPE
,您将强制浏览器进入 Quirks 模式:怪癖模式基本上是一种反社会模式,当您忘记告诉浏览器遵循特定的
DOCTYPE
时,浏览器就会进入该模式。在大多数情况下,IE 是其中最糟糕的,当您忘记使用 IE 定义DOCTYPE
时,一切都会崩溃:Without the
DOCTYPE
, you force the browser into Quirks Mode:Quirks Mode is basically a sociopathic mode that browsers enter when you forget to tell them to follow a specific
DOCTYPE
. In most cases, IE is the worst of them all and all hell breaks loose when you forget to define aDOCTYPE
with IE:总是,总是,总是使用
预先 。
然后,设计您的网页。
否则,你就不能指望它能发挥作用。
Always, always, ALWAYS use a
<!DOCTYPE __>
up front.Then, design your webpage.
Otherwise, you can't expect it to work.
是的,
是 html5
http:// /www.w3schools.com/html5/tag_doctype.asp
doctype告诉浏览器如何渲染页面,每个doctype都会导致不同的渲染。
试试这个文档类型:
Yes,
<!doctype html>
is the doctype for html5http://www.w3schools.com/html5/tag_doctype.asp
The doctype tells the browser how to render the page, and each doctype will cause a different rendering.
Try this doctype: