`
yuting_lv
  • 浏览: 111220 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

缺少HTML Doctype造成的样式问题

 
阅读更多

html页面中顶部缺少Doctype会给布局和样式带很诡异的影响,从样式和位置细节找不到问题原因时,第一个就要考虑是不是缺少Doctype文档类型声明。目前比较常用的Doctype是html5类型:

 

 

<!DOCTYPE html>

 

这个声明使IE8、IE9处于Standards Mode标准模式,IE7、IE6处于Almost Standards Mode标准兼容模式,Firefox等现代浏览器基本是Standards Mode标准模式,详细参考这个表格

 

收集一下缺少Doctype遇到过的问题现象:

 

 

1. 绝对定位元素位置偏移,怎么调都没用

 

2. 在Firefox和Chrome中,表格font-size没有继承父类元素大小,莫名其妙变大了几像素。

一开始给table元素添加:font-size: inherit; 解决了,后来发现还是没有Doctype的问题。

 

3. 非a链接元素hover效果没有上去

 
分享到:
评论

相关推荐

    网页 DOCTYPE html标签的作用1

    3. 避免因缺少DOCTYPE导致的quirks mode,提高页面的跨浏览器兼容性。 4. 简化文档结构,无需引用外部DTD。 理解并正确使用DOCTYPE声明是编写符合现代Web标准的HTML文档的基础,对于创建高质量、可维护的网页至关...

    选择正确DOCTYPE解决CSS在网页失效问题

    当你发现CSS样式无法正常应用到网页上时,DOCTYPE的选择可能是导致问题的关键因素之一。本文将深入解释DOCTYPE的作用,以及如何选择正确的DOCTYPE来解决CSS失效的问题。 首先,DOCTYPE声明位于HTML文档的开头,它的...

    DOCTYPE声明作用及用法详解

    理解其工作原理和浏览器的处理方式,可以有效避免因呈现模式错误导致的布局和样式问题,确保网页在各种环境下都能得到预期的显示效果。在开发网页时,始终推荐遵循最新的W3C标准,并使用正确的DOCTYPE声明来引导...

    IE下文本模式!DOCTYPE作用介绍

    在网页开发中,DOCTYPE声明是不可或缺的一部分,尤其是在处理与Internet Explorer(IE)浏览器兼容性问题时。DOCTYPE的作用在于指导浏览器如何解析HTML或XML文档,确保它们按照预设的规则渲染页面。本文将深入探讨...

    去掉这段代码的话在IE下显示会有问题

    由于缺少更多细节,我们无法确切地知道这段注释是如何实现这一功能的,但可以合理推测,这段注释可能是通过某种方式触发了IE的某个特性,使得即使DOCTYPE声明不完全符合标准,IE也能以一种较为正常的方式渲染页面。...

    html5权威指南

    在head部分,可以包含meta、title、link、script等标签,用于定义网页的元数据、标题、链接样式表和脚本等。body部分则包含实际要在浏览器中显示的所有内容,如段落、图片、表单等。 3. HTML5的新元素和表单 HTML5...

    HTML5面试题面试整理(含答案)最新版.docx

    HTML5是现代网页开发的核心,其面试题涵盖了各种技术细节,包括文档类型声明(DOCTYPE)、语义化标签、hasLayout属性、以及常见的图像格式的区别。下面是对这些知识点的详细解释: 1. **DOCTYPE的作用**: DOCTYPE...

    DOCTYPE和XHTML的相关认识

    例如,一个缺少正确闭合标签或大小写不一致的HTML文档,可能在某些浏览器中仍能正常显示,但在其他浏览器中则可能出现问题。因此,遵循XHTML的严格规范对于保证网页在各种环境下的稳定表现至关重要。 总之,DOCTYPE...

    精通CSS PART1

    - **怪异模式**:当文档缺少DOCTYPE或DOCTYPE格式不正确时,浏览器会进入怪异模式,以兼容旧版浏览器的行为。 #### 知识点四:代码简化与表示 文档中提到,在包含重复数据的(X)HTML示例中,为了避免编写每一行代码...

    div+css教程

    DOCTYPE的不同声明会影响CSS的效果,尤其是在标准浏览器中,如果缺少或错误声明DOCTYPE,可能导致CSS样式失效。 首先,DOCTYPE声明告诉浏览器页面基于哪个HTML或XHTML规范。例如,`&lt;!DOCTYPE html&gt;`声明定义了文档...

    【HTML】简单的静态音乐网页设计

    在【index.html】中,我们可以看到HTML5的DOCTYPE声明,用于告诉浏览器以标准模式渲染网页。接着是HTML标签,它定义了整个文档的结构,包括部分,存放元信息如字符编码(通常设置为UTF-8),以及标签,定义了网页的...

    前端开发面试题集锦.docx

    DOCTYPE HTML&gt;`声明通常启动标准模式,而缺少DOCTYPE或者使用旧版DOCTYPE可能导致浏览器进入quirks mode。 3. **SEO(搜索引擎优化)**:从前端角度出发,做好SEO需要考虑以下几点: - 了解搜索引擎如何抓取和索引...

    前端大厂最新面试题-html.docx

    * 易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。 * 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。 * 方便其他设备解析,如盲人阅读器根据语义渲染网页。 * 有利于开发和维护,语义化更具...

    前端开发面试题集锦(一).docx

    例如,HTML4.01 Strict或XHTML1.0 Strict会触发严格模式,而缺少DOCTYPE或旧版本的DOCTYPE声明可能导致混杂模式。 - 混杂模式下,浏览器会模拟老版本的IE(如IE5.5)的行为,包括一些已知的bug和非标准特性。 - ...

    java前端面试题

    当浏览器检测到文档不符合HTML标准时(比如缺少DOCTYPE声明或使用了错误的DTD),就会进入混杂模式。在这种模式下,浏览器会尝试以兼容的方式呈现内容,可能会导致布局和样式的表现不一致。 **区分依据**: - 如果...

    css教程好用啊

    重要的是,文档本身及其引用的CSS样式和其他资源文件必须使用相同的字符集,以避免出现乱码问题。 ##### 3. HTML标签 在XHTML中,所有的HTML标签都必须正确闭合。有两种类型的标签: - **成对的标签**:如`&lt;div&gt;`...

    web前端面试题

    - **兼容模式**: 如果文档缺少 `&lt;!DOCTYPE&gt;` 或者其声明不符合规范,浏览器将尝试以向后兼容的方式解析页面,这可能导致页面布局和行为不符合预期。 **2. HTML5 的 `&lt;!DOCTYPE&gt;` 为何简化为 `&lt;!DOCTYPE HTML&gt;`** ...

    电脑兼容性

    - **问题描述**:不同浏览器对HTML文档类型声明(DOCTYPE)的处理方式不同,这会影响CSS样式的渲染。例如,在缺少DOCTYPE的情况下,某些浏览器可能会进入“怪异模式”,导致CSS渲染出现差异。 - **解决方案**:...

    2018最新BAT 《前端必考面试》.docx

    如果缺少DOCTYPE或者格式错误,浏览器会进入“quirks mode”(混杂模式),在这种模式下,浏览器会尝试模拟老版本浏览器的行为,以便与旧网页兼容。 2. **行内元素与块级元素**:行内元素(如`&lt;span&gt;`, `&lt;a&gt;`)不会...

Global site tag (gtag.js) - Google Analytics