2011-07-14 16 views
5

Ben HTML5 DOCTYPEHTML5 Doctype DIV yükseklikleri sıkıştırır?

<!DOCTYPE html> 

kullanmak ve bir div içindeki resmi koyarsanız, Mac üzerinde Chrome, Safari veya Firefox bir sayfa render div sürekli 4 piksel çok uzun hale gelir. Ben büyük DOCTYPE'ta

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

kullanırsanız div'ler içindeki görüntü olarak aynı yükseklikte olan doğru oluşturulur. Bu, aynı HTML ve CSS kodunu kullanıyor. Değişen tek şey, doctype ve fazladan 4 piksel gösteriliyor. Bunu düzeltmenin bir yolu var mı?

+0

Sen html5reset.org – Catfish

cevap

1

HTML5, öğelerin içindeki boşlukların oluşturulmasını belirtir. Bunun için 4px ekstra alırsınız, eğer font boyutlarını bu elemanlara 0 olarak ayarlarsanız, alan kaybolur.

+0

bakmak gerekir Gerçekten HTML5 ile ilgisi yoktur. Bu "Standartlar modu" vs "değil". 'font-size: 0' düzeltmek için çalışıyor, ancak normal düzeltme değil. – thirtydot

+0

Bu doğru değil, neden 3 oy aldığından emin değilim. Aşağıdaki cevap geçerlidir. – MMM

10

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

<!DOCTYPE html> = Standartlar Modu - http://jsbin.com/ogacor

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

img için display: block veya vertical-align: top (veya bottom) ekleyin, düzeltmek için. Bu ilk etapta olur

nedeni img varsayılan inline elemanları tarafından, ve bir öntanımlıyı baseline ait vertical-align olması. Taban çizgisi, içeren elemanın tabanına değmez - boşluk, ikisi arasındaki mesafedir.

Bkz: