2017-11-02 3 views
1

Ich lerne CSS, und ich habe nicht herausgefunden, warum mein "body {font-size ...}" Parameter scheint nicht in einem Tag zu arbeiten.CSS Körper Schriftart funktioniert auf Geige, warum nicht Safari oder Firefox?

Das Konstrukt, nach dem ich bin, funktioniert gut auf fiddle; aber wenn ich es alle zusammen in eine HTML-Datei ...

<html> 
<head> 
<style> 
body {font-size:80%; font-family: Courier, monospace} 
</style> 
</head> 
<body> 
<p>This text is outside the table.</p> 
<table> 
<caption>Inside</caption> 
<tr><th>Inside</th></tr> 
<tr><td>Inside</td></tr> 
</table> 
<p>Outside</p> 
</body> 
</html> 

... beide Safari V11.0 und Firefox V56.0 in OSX 11.6 machen den Text außerhalb der Tabelle bei 80%, was ich erwartet hatte, aber der Text innerhalb der Tabelle zu 100% wiedergegeben wird:

Both Safari and Firefox render the above HTML the same

die „font-style“ Parameter wird klar arbeiten: wenn ich es entfernen, werden die Tabelleninhalte in einigen gerendert werden Proportionalschrift

Wenn ich anstelle der Schrift Stenographie verwenden ...

body {font:80% Courier, monospace} 

... Ich erhalte die gleichen Ergebnisse.

Irgendwelche Vorschläge für was ich noch lernen muss?

--Gil

Antwort

2

Vom HTML 5 spec, Rendering section

In quirks mode, the following rules are also expected to apply: 

@namespace url(http://www.w3.org/1999/xhtml); 


table { 
    font-weight: initial; 
    font-style: initial; 
    font-variant: initial; 
    font-size: initial; 
    line-height: initial; 
    white-space: initial; 
    text-align: initial; 
} 

Ihre Seite keine Doctype hat, so ist es im Quirks-Modus ist, und daher font-size (unter den anderen Schrifteinstellungen) für die Tabelle zurückgesetzt werden. Fiddles verwenden immer den Standardmodus und setzen daher die Schriftgröße nicht zurück.

Fügen Sie <!DOCTYPE html> an den Anfang Ihrer Datei.

+0

Wow. Ich hatte keine Ahnung. Danke für deine ausgezeichnete Antwort. Übrigens, Wikipedia (quirks mode) hat eine gute Erklärung. –

Verwandte Themen