登录 用户中心() [退出] 后台管理 注册
   
您的位置: 首页 >> SoftHub关联区 >> 主题: [js/html5/css] DOCTYPE html 造成的怪异现象     [回主站]     [分站链接]
[js/html5/css] DOCTYPE html 造成的怪异现象
clq
浏览(274) - 2020-05-31 18:20:30 发表 编辑

关键字: js

[2020-06-02 13:29:01 最后更新]
[js/html5/css] <!DOCTYPE html> 造成的怪异现象

首先我们来看标准的说法

https://www.cnblogs.com/HDWdemo/p/12005120.html

 什么是<!DOCTYPE html>,以及其重要性

什么是<!DOCTYPE html>?

在HTML文档初,往往会有这么一句话<!DOCTYPE html>,那么它的意义是什么呢?它是html5标准网页声明,全称为Document Type HyperText Mark-up Language,意思为文档种类为超文本标记性语言或超文本链接标示语言,现在是这个简洁形式,支持html5标准的主流浏览器都认识这个声明。表示网页采用html5,<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
这个标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
public 这行声明了文档的根元素是 html,它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0
Strict//EN" 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到,浏览器将使用公共标识符后面的URL 作为寻找 DTD 的位置。

<!DOCTYPE html>的重要性?

1作用:声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。
  document.compatMode:
BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。
 

       这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,

浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样式。

    如果你的页面添加了<!DOCTYPE html>那么,那么就等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的

标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。

这就是<!DOCTYPE html>的作用。

2 使用:<!DOCTYPE html>

2.1 使用也很简单,就是在你的html页面的第一行添加"<!DOCTYPE html>"一行代码就可以了

2.2 jsp的话,添加在<%@ page %>的下一行。

2.3 不用区分大小写

 

附:需要注意的问题

没什么特别的,就是一定要将Doctype声明放在xHTML文档的顶部,上面哪怕多个html注释标记都不行。

 

最好示例代码也加上Doctype,否则效果会有差异。尽管我们不给出这句声明浏览器照样会将HTML文档呈现出来,但是由于HTML版本导致的bug也许就出在这里。

--------------------------------------------------------
别的文章基本也是这样的说法。
但今天发现,一个 100% 高度的 iframe 会在父 div 有 overflow-y:auto 的网页中父 div 会显示滚动条,而要设置高度比父 div 小 4px 时就会这个滚动条才会消失。
这在 iframe 中自己有滚动条时会很难看,因为会有两个滚动条,即使显示一个的时候也很怪异,因为这时 iframe 中的内容是很少的,还根本没那么高。
就是说当一个 div 里的 iframe 有自己那么高时(或者是小于的数值不足 4 px)那么 div 就认为 iframe 装不下了,要显示滚动条!

具体原因未知,目前只有将 overflow-y 设置为 hidden 才行,但这在需要 auto 的时候,比如 iphone 兼容时,这就不行了。目前已知的做法是去掉
<!DOCTYPE html>

这显然也是有隐患。但暂时未知其他解决办法。

试过让 iframe 的 box-sizing: border-box; 但无效。

2.已知的第二种方法,让外层的 div 的 padding 大于等于 4px 也可以。就不用改 DOCTYPE ,但这样出来的效果显然不太好。

3.已知的第三种方法,给iframe添加样式:display:block; 这个也不用去掉 DOCTYPE 。这种解决办法可以搜索 "div 中的 iframe 4px" 看到很多教程说到。


--------------------
所以总结一下,要给 100% 高度的 iframe(其他高度的最好也如此)加两个属性:display:block; box-sizing: border-box;












clq  2020-06-02 13:29:01 发表 编辑


https://www.cnblogs.com/st-client/p/10149487.html

关于div包裹img、iframe等标签会多3px或4px的问题

div标签直接包裹img或iframe等标签的时候,div不设置高度,子标签设置高度,此时div标签会被撑开,同时div的高度会比子标签多3px或4px,这是由于子标签底部多了几个px的空白,由于子标签是行内元素,display属性值为inline,类似于文本,需要把img或iframe标签设置为块级元素,即给img、iframe这些标签设置{display:block},就不会出现几像素的空白。



总数:1 页次:1/1 首页 尾页  
总数:1 页次:1/1 首页 尾页  


所在合集/目录
css常用推荐 更多
CSS常用推荐 更多



发表评论:
文本/html模式切换 插入图片 文本/html模式切换


附件:



NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.

Copyright © 2005-2020 clq, All Rights Reserved
版权所有
桂ICP备15002303号-1