2014-06-29 14 views
7

yüksekliği işler karışıyor HTML ve CSS'de doğrulanmış yerine). HTML 4.01 Transitional doctype (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">) ileHTML ve CSS tam gerekçe sağlanması: Sınırlı tuhaflıklar modda çalışır ancak hiçbir-Quirks modu Final çizgi bırakılır <em>sol gerekçe</em>, farklı olarak <em>tam gerekçe</em> (ulaşmak için çalışıyorum

<style> 
    p { 
     border: 1px solid blue; 
     text-align: justify; 
    } 
    p::after { 
     content: ""; 
     width: 100%; 
     display: inline-block; 
    } 
</style> 
<meta charset=utf-8> 
<title>Justification</title> 
<p>Foo bar</p> 
<p>Foo bar</p> 
<p>Foo bar</p> 

, belge sınırlı tuhaflıklar modunda oluşturulur ve istenilen her paragraf ile, tamamen haklı:

Ben bu belgeyi, artı bir doctype tanımı var fazladan alan yok. HTML 5 doctype (<!DOCTYPE html>) ya da HTML ile 4.01 (Sıkı) doctype (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ), belge no-tuhaflıklar modunda oluşturulur ve her paragraf, tamamen haklı olduğunu ancak uzayda için ek bir satır alır ile

. height: 0'u ::after'a eklemek hiçbir şey yapmaz (zaten background: red'un beğeneceği gibi bir yüksekliğe sahip değildir).

Canlı gösterimler: HTML 4.01 Transitional ve HTML 5 sürümleri.

Belgede HTML 4.01 Transitional rendering'i Strict veya HTML 5 doctype ile nasıl edinebilirim?

(Bu arada, p elemana height için bir değer atama ve etkili doğru sonucu elde etmek için varsayılan taşma davranışa bağlı olarak, verilen bilinen içeriğini geçici çözüm farkındayım. Ben cevap olarak kabul etmiyorum -I gizli bilgi ya da JavaScript müdahalesi olmadan yapılabilir bir hakiki çözüm arıyorum çizgilerin keyfi bir sayı olması paragrafı yeniden boyutlandırma-varsayalım.)

+2

HTML 4 geçişli doctype "HTML 4 doctype" öğesini çağırmamaya dikkat edin. * Katı * HTML 4 dokümanı, HTML5 dokümanı ile aynı sonucu verir. Yani bu, HTML 4 ile HTML5 arasında bir fark değil, ancak sıkı ve neredeyse sıkı mod arasındaki farktır. – BoltClock

+0

@BoltClock XHTML katı/geçiş bölüşümünü hatırlattığım halde, herhangi bir nedenden ötürü katı doktrini unutmuş olduğum HTML4'ü yazdığımdan çok uzun zaman geçti! –

+0

@BoltClock: Orada ipucu için teşekkürler; kesinlikle haklısınız ve bu onu takip etmeme yardımcı olabilir. Umarım mümkün olur! Bu şeyleri açıklığa kavuşturmak için bu sorunu güncelledim. –

cevap

8

yerine gerekçesini kontrol etmeye çalışır :after hile Son satır,kullanırsanız, şimdi oldukça iyi desteklenen text-align-last özelliğini kullanın.önekli sürümü:

+0

Harika! Bunu bilmiyordum ve istediğim şeyi yapıyor. ☺ Opera ve Safari'nin şu anda destekleyip desteklemediğinden emin değil; MDN makalesinde bunların yapılmadığı önerilmektedir, ancak özellikle Göz Kırpma Temelli Opera ile ilgili olarak muhtemelen güncel değildir; Şu anda yaptığım şey için kabul edilebilir bir ticaret any kapalıdır. –

+0

hala safari, iOS, Aralık 2016 itibariyle opera. Bummer. – squarecandy

İlgili konular