Geek Answers Handbook

HTML5 Doctype screw height div?

When rendering a page in Chrome, Safari or Firefox on a Mac, if I use doctype HTML5

<!DOCTYPE html>

and place the image inside the div, the div will be displayed sequentially 4 pixels too high. If I use an old doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Divas are displayed correctly, which is the same height as the image inside it. This uses the same HTML and CSS code. The only thing that changes is doctype and an extra 4 pixels. Is there any way to fix this?

+5
source share
2 answers

http://hsivonen.iki.fi/doctype/

<!DOCTYPE html>= Standards Mode - http://jsbin.com/ogacor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">= Almost standard mode - http://jsbin.com/ogacor/2

, display: block vertical-align: top ( bottom) img.

, img inline vertical-align baseline. - - .

:

+10

HTML5 , . 4px, 0, , .

+1

More articles:


All Articles