Why does removing doctype on html slightly shift some on screen elements
Question
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. 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.
<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. No style changes occurred on the pages, just altering the doctype does this.
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>
1 answers
solution1
0 2016-01-14 14:06:06
As found on w3schools
The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.
The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
Basically, it let's the browser know which HTML version you're using to properly render the elements
Before: This is 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
<!DOCTYPE HTML>
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.