程序员经验分享-hwhale

如果使用 DOCTYPE，CSS 样式应用不正确

2024-06-22

1) CSS 样式未正确应用于我的 HTML 页面，如果我在 html 上添加特定版本（如 HTML5、HTML4.1 strict 等），如果我删除所有 DOCTYPE 语句，它可以正常工作。

我的HTML代码（没有DOCTYPE也能正常显示）：

<html> 
<head>
<title>Test</title>
</head>
<body style="background-color:green;height:100%;width:100%;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>

我的 HTML 代码（背景色红色未应用于 DOCTYPE）：

<!DOCTYPE html>
<html> 
<head>
<title>Test</title>
</head>
<body style="background-color:green;height:100%;width:100%;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>

另外，我尝试用严格的 XHTML 1.0 代替 HTML5，

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

and,

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

但没有任何效果。如何正确添加版本。

2）也是现在最好的版本。 HTML5 或 html4.01 或 HTML 4.01 与 XHTML？


缺少文档类型触发器怪癖模式 https://stackoverflow.com/questions/6404635/is-quirks-mode-relevant-in-2011，这只是为了向后兼容人们开始使用文档类型之前创建的“遗留代码”。它几乎不应该被使用；你应该总是声明一个文档类型。

选择哪一个？

在当今时代，这就是您所需要的：

<!DOCTYPE html>

如果您愿意，可以继续对此文档类型使用 XHTML 语法。就 CSS 而言，我认为不同的文档类型没有任何差异，只要你有一个。然而，文档类型将改变哪些属性和元素是有效的以及在哪些上下文中。使用W3C 验证器 http://validator.w3.org/来测试你的 HTML。

不幸的是，这意味着您将重写大部分 CSS 以在标准模式下工作。我知道这听起来像是一件苦差事，但你只需要硬着头皮重写它。

前进的重要说明：删除内联 CSS 并使用外部样式表，否则（除其他外）您会发现维护完全是一场噩梦。

出于兴趣：http://hsivonen.iki.fi/doctype/#choosing http://hsivonen.iki.fi/doctype/#choosing

选择文档类型

文本/html

简而言之：以下是为文档选择文档类型的简单指南 新的文本/html文档：

标准模式，前沿验证

<!DOCTYPE html>

除非您有特定理由避免这样做，否则这是正确的做法。使用此文档类型，您可以验证新功能，例如<video>, <canvas>和咏叹调。请务必在以下位置测试您的页面 顶级浏览器的最新版本。标准模式，遗留验证 目标

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

此文档类型还会触发标准模式，但可以让您坚持使用旧版验证，以防您想避免新功能或更多功能 旧功能的精确验证。您想使用该标准 模式，但您在表格布局中使用切片图像并且不想修复 他们

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

这为您提供了几乎标准模式。请注意，如果您基于表格中切片图像的布局可能会被破坏 后来转向 HTML5（以及完整的标准模式）。你 故意想要怪癖模式

没有文档类型。

请不要这样做。故意为怪癖模式进行设计将会困扰你、你的同事或你的继任者 未来——当没有人再关心 Windows IE 6（已经没有人 人们关心的是 Netscape 4.x 和 IE 5）。针对 Quirks 模式进行设计 这是一个坏主意。相信我。

如果您仍然想支持 Windows IE 6，最好使用条件注释对其进行特定的修改，而不是回归其他版本 浏览器进入 Quirks 模式。

我不推荐任何 XHTML 文档类型，因为提供 XHTML 因为 text/html 被认为是有害的。如果您选择使用 XHTML 无论如何，请注意 XML 声明使 IE 6 成为可能（但是 不是 IE 7！）触发 Quirks 模式。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

如果使用 DOCTYPE，CSS 样式应用不正确 的相关文章

  • AA 级辅助功能 - 使用文本阴影增强颜色对比度

    我有一个网站 正在根据 WCAG 2 0 AA 级合规性进行编码 但其中一个按钮的颜色对比度未通过 背景 D57405 前景 FFF 是否可以使用文本阴影来增强对比度 这会被视为通过吗 我可以为不支持文本阴影的浏览器提供不同的颜色 但我想尝

  • 页脚按固定位置的元素重叠

    我有侧边栏块 其位置固定 当我滚动浏览器窗口时 我需要修复此侧边栏页脚的重叠 我尝试将侧边栏的位置更改为absolute 计算移动条件并在窗口的滚动事件上移动它 但当我快速滚动时它无法正常工作 我该如何解决这个问题 快速滚动窗口时出现问题

  • 使用JQUERY滑动切换页面

    我在 stackoverflow 上搜索以查找在我的应用程序之间滑动的代码 并找到了下面的 jquery 代码 从答案中我读到它工作正常 但是当我将它放在我的页面上时 它无法工作 JavaScript div ui page live sw

  • 创建以垂直方向文本作为表头的 HTML 表格

    我想创建一个 HTML 表格 其中垂直书写的文本作为标题 即标题文本旋转 90 度 我正在使用以下样式 th style display blocking padding left 1px padding right 1px padding

  • 伪元素：after和溢出隐藏

    我有这个标记 label required after content color red

  • CSS 网格具有不等高和宽的列

    我有 5 个盒子 三个在第一行 接下来的两个在第二行 I want all the boxes but the second to be of equal height and the 5th box to go right under t

  • 使用/ requestAnimationFrame 更改滚动事件上的 css

    我想更改视口元素的背景颜色 使用overflow scroll 这是我的第一次尝试 http jsfiddle net 2YeZG http jsfiddle net 2YeZG 正如您所看到的 在绘制新颜色之前 前一种颜色会短暂闪烁 其他

  • DataTable 不是 DataTables JQuery 库的函数错误

    我有一个使用 Datatable 库的简单示例 我让它与 JSFiddle 一起工作 http jsfiddle net 3hhn7y7f http jsfiddle net 3hhn7y7f 但是当我尝试使用实际文件执行此操作时 出现以下

  • 使用表格作为表格可以接受吗？还是使用div更正确？

    我想知道是否可以接受使用tables 代表表格 严格来说 名称 值对是表格数据 不是吗 表单只是用户可定制的一组名称 值对 那么使用是否正确table在这种情况下 或者我应该使用div使用 CSS 设计样式 尝试字段集 我更喜欢将字段分解为

  • 部分在 JSF 中应该是什么样子？ HTML5 还是 XHTML？

    这只是我现在的好奇心 在 Eclipse 中这是定义在的部分新 Facelet 模板例如 但对于大多数模板来说都是一样的 我想使用更多clear上面的代码 所以我更改为

  • 为什么我的 HTML 不使用 CSS 中定义的最后一个样式？

    我有以下按此顺序编写的 CSS h2 last child p last child ul last child margin bottom 0 content message margin 20px 1 667em 1 667em 1 6

  • 有人知道 pinterest.com 中的 div 是如何发出的吗？

    我尝试像这样水平渲染我的 div 图像 从左到右 从上到下 但这并不完全正确 想知道是否只是垂直完成每列的渲染 从上到下 从右到左 有人知道如何模仿 复制此页面吗 更新 为了回应下面的答案 我快速搜索了 砖石与同位素 下列post http

  • 如何阻止richfaces风格？

    我开发了这个联系表格

  • CSS - 相对定位的父div不拉伸到绝对子div高度

    我整个早上都在谷歌上搜索这个 但似乎无法让它发挥作用 我有一个具有相对定位的父 DIV 和一个位于其中的两列子 DIV 设置 两者都定位为绝对 我需要父 DIV 的高度与内部 DIV 的内容一起拉伸 我尝试在 content 的结束标记之前

  • 除非选择单选按钮，否则如何使复选框变灰？

    对于 javascript 来说非常陌生 但是任何帮助我入门的帮助将不胜感激 我有一个简单的表格 div div

  • 输入宽度与文本区域宽度

    读完主题后输入尺寸与宽度 https stackoverflow com questions 1480588 input size vs width 我很清楚我们不应该使用 size 属性而应该使用 css 样式 输入 文本 和文本区域显示

  • 将画布图像保存到服务器

    我正在尝试将画布图像保存到服务器 我可以保存文件 但它始终是 0 字节 我的代码有什么问题吗 php

  • 冻结 TH 标题和滚动数据

    我有一个 html 表 我想冻结标题行标签以滚动数据 我怎样才能做到这一点 我需要使用Dom吗 谢谢 我的解决方案是使用两个表并固定列宽 下面的表格位于可滚动的 div 中 并且没有标题

  • 在 Bootstrap 中的悬停中打开折叠选项卡

    我在 Bootstrap 中有折叠面板 单击选项卡标题即可打开该面板 我试图弄清楚如何使用鼠标悬停在选项卡的总宽度上来打开 但我没有得到它 下面是默认关闭的单个选项卡的代码 div class panel panel default sty

  • Visual Studio 2013 中的 JavaScript HTML5 CSS3 项目模板

    我刚刚下载了 Visual Studio 2013 Express for Web 我想知道如何部署仅限 JavaScript HTML5 和 CSS3 的项目 我找不到合适的模板或方法来做到这一点 我已经在网上搜索过JavaScript模

随机推荐

热门标签