文档类型的更改导致网页呈现不同

发布于 2025-01-02 21:31:44 字数 486 浏览 0 评论 0原文

我有一个以前没有文档类型声明的网页。

现在,我已将 添加到开头。不幸的是,现在它的呈现方式有所不同。

有一个 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

九命猫 2025-01-09 21:31:44

您需要设置 标记(以及包含 #thediv 的任何其他标记)的高度也达到 100%:

html, body {
    height: 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:

html, body {
    height: 100%;
}

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.

攒一口袋星星 2025-01-09 21:31:44

如果没有 DOCTYPE,您将强制浏览器进入 Quirks 模式

换句话说,所有浏览器都需要两种模式:旧浏览器的怪异模式
规则,严格模式为标准。 IE Mac 是第一个浏览器
实现两种模式,以及 IE Windows 6、Mozilla、Safari 和 Opera
也纷纷效仿。 IE 5 Windows,以及 Netscape 等较旧的浏览器
4、永久锁定怪异模式。

选择使用哪种模式需要一个触发器,而这个触发器是
在“文档类型切换”中找到。根据标准,任何 (X)HTML
文档应该有一个文档类型来告诉全世界哪个
文档使用的 (X)HTML 风格。

怪癖模式基本上是一种反社会模式,当您忘记告诉浏览器遵循特定的 DOCTYPE 时,浏览器就会进入该模式。在大多数情况下,IE 是其中最糟糕的,当您忘记使用 IE 定义 DOCTYPE 时,一切都会崩溃:

  • jQuery 的 DOM 交互变得非常慢,因为 IE 在以下情况下无法实现许多 DOM 功能:在怪癖模式下。
  • 事情永远看起来不对劲。
  • 远离它。这样你会更快乐。

Without the DOCTYPE, you force the browser into Quirks Mode:

In other words, all browsers needed two modes: quirks mode for the old
rules, strict mode for the standard. IE Mac was the first browser to
implement the two modes, and IE Windows 6, Mozilla, Safari, and Opera
followed suit. IE 5 Windows, as well as older browsers like Netscape
4, are permanently locked in quirks mode.

Choosing which mode to use requires a trigger, and this trigger was
found in ’doctype switching’. According to the standards, any (X)HTML
document should have a doctype which tells the world at large which
flavour of (X)HTML the document is using.

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 a DOCTYPE with IE:

  • jQuery's DOM interactions get gridingly slow, as IE doesn't implement many DOM functions when in Quirks Mode.
  • Things never look right.
  • Stay away from it. You'll be happier that way.
别靠近我心 2025-01-09 21:31:44

总是,总是总是使用预先

然后,设计您的网页。

否则,你就不能指望它能发挥作用。

Always, always, ALWAYS use a <!DOCTYPE __> up front.

Then, design your webpage.

Otherwise, you can't expect it to work.

上课铃就是安魂曲 2025-01-09 21:31:44

是的, 是 html5

http:// /www.w3schools.com/html5/tag_doctype.asp

doctype告诉浏览器如何渲染页面,每个doctype都会导致不同的渲染。

试试这个文档类型:

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

Yes, <!doctype html> is the doctype for html5

http://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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文