Font-size attribue is broken when displaying any text before <!DOCTYPE…>
Question
This may be a dumb question. I'm defining all my styles on an external stylesheet and I'm linking them to my document like this:
<link rel="stylesheet" type="text/css" href="tema.css" />
My CSS goes like this:
body {
background: #333;
font-size: 10pt;
color: white;
font-family: sans;
}
#Table {
/* font-size: inherit; */
}
And my <!DOCTYPE> goes like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Pretty standard by the way. But why does my CSS style break if I print anything before the <!DOCTYPE> declaration on my document?
If I do this:
foo
<!DOCTYPE … >
<html>
<table id="Table">…</table>
</html>
The font-size attribute of my table gets broken and all the text within it is rendered with the default font-size of my browser (12 pt), but only the text that is inside the table (I'm yet to find another issues, this is the only one I've noticed so far), and only if I don't set an specific font-size for the table, either 10pt directly or inherit :
However, if I do this (put the <!DOCTYPE> before the echoing):
<!DOCTYPE … >
foo
<html>
<table id="Table">…</table>
</html>
Or this (set an specific font-size for the table, even when the <!DOCTYPE> is after the echoed text):
body {
…
}
#Table {
font-size: inherit;
}
Everything seems to work fine:
The question is: Why? Has this happened to someone else? Is this a bug? should I report it?
Here's the test document on pastebin so you can play with it.
Note :
This happens on Google Chrome, IE, Firefox, Opera, Midori and even my android's built-in browser.
I'm echoing that text only for debugging purposes, so it's not that necessary, and I can leave the <!DOCTYPE> at the top but it just feels wrong to have it there, it's just that I can't find any information of this behaviour that is related to the position of the <!DOCTYPE> declaration.
3 answers
solution1
3 ACCPTED 2014-07-02 06:48:55
It's not a bug.
Having anything before DOCTYPE switch rendering engine in browsers to quirks mode and makes them to behave like IE5 (well, sort of).
So, the best solution is always output DOCTYPE before anything else.
In your case the problem is in
Don't inhertit font properties into tables except for font-family.
See:
https://developer.mozilla.org/en-US/docs/Mozilla_Quirks_Mode_Behavior
https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode
solution2
2 2014-07-02 06:56:21
First of all, you don't output anything before <!DOCTYPE> . The Doctype should be the absolute first thing the browser sees in the document, as it uses the doctype to figure out how to render the page.
The web is built on standards and when the HTML is fundamentally broken, the browser switches over to Quirks Mode.
solution3
1 2014-07-02 06:54:39
You shouldn't have any user-readable or browser-interpreted text before the DOCTYPE declaration, because it specifies the type of content you want to use in your document. The solution is simply to avoid doing that. The only text allowed before the DOCTYPE declaration is the one read solely by the server side - for example PHP code, JSP snipplets and so on..
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.