简体   繁体   English

为什么在html上删除doctype会稍微改变屏幕上的某些元素

[英]Why does removing doctype on html slightly shift some on screen elements

For HTML4 to HTML5 conversion I've been comparing my html4 vs html5 pages against one another and have seen that getting rid of the depreciated elements after doctype is causing on screen elements to sometimes move ever so slightly. 对于HTML4到HTML5的转换,我一直在相互比较我的html4和html5页面,并且看到在doctype之后摆脱折旧的元素导致屏幕元素有时移动得如此之小。 Ex. 防爆。 In the below code, the anchor tag has what looks like a 3 pixel padding on the bottom that doesn't show up in debug tools, but visibly is shifting down in HTML5. 在下面的代码中,anchor标签的底部看起来像3像素填充,在调试工具中没有显示,但在HTML5中明显向下移动。

<header>
<a href="javascript:commonSubmit('displayHomePage')"><img class="noBorder" src="images/logo.png" alt="Home" /></a>
<div id="nav">
...

Also, in a very large template generated table, some information in some cells occasionally shift a pixel or 2 up and over. 同样,在非常大的模板生成表中,某些单元格中的某些信息有时会向上或向上移动一个像素或2个像素。 No style changes occurred on the pages, just altering the doctype does this. 页面上没有样式更改,只需更改doctype即可。

The only code change to occur, which causes the shifts: Before: 唯一的代码更改发生,从而导致移位:之前:

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

After: 后:

<!DOCTYPE HTML>

As found on w3schools 正如在w3schools上发现的

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. <!DOCTYPE>声明必须是HTML文档中位于<html>标记之前的第一件事。

The <!DOCTYPE> declaration is not an HTML tag; <!DOCTYPE>声明不是HTML标记。 it is an instruction to the web browser about what version of HTML the page is written in. 这是向Web浏览器发出的有关页面写入哪个HTML版本的指令。

Basically, it let's the browser know which HTML version you're using to properly render the elements 基本上,它使浏览器知道您正在使用哪个HTML版本来正确呈现元素

Before: This is HTML 4.01 之前: 这是HTML 4.01

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

After: This is HTML5 之后: 这是HTML5

<!DOCTYPE HTML>

Hope this helps! 希望这可以帮助!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM