Is this a standards-compliant result?
Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:acid="http://acid/">
<head>
<title>Acid4 Test</title>
<link rel="stylesheet" type="text/css" href="acid4.css" />
</head>
<body>
<h1><acid:textGradient></acid:textGradient>Acid<span>4</span></h1>
</body>
</html>
and stylesheet:
@font-face {
src: url('syncopa开发者_Go百科teBold.ttf');
font-family: Syncopate;
font-weight: bold;
font-style: normal;
font-variant: none;
}
@font-face {
src: url('syncopate.ttf');
font-family: Syncopate;
font-weight: normal;
font-style: normal;
font-variant: none;
}
* {
margin: 0;
padding: 0;
}
body > *:first-child { /* our title */
font-family: Syncopate;
font-size: 4em;
font-weight: bold;
margin: 0;
text-shadow: 0 0 10px black;
text-transform: lowercase;
*color: blue;
_color: red;
}
body > *:first-child > span { /* The 4 in Acid4 */
color: white;
font-weight: normal;
font-size: 200%;
vertical-align: sub;
z-index: 999;
}
acid\:textGradient:empty {
background: url('textGradient.png') repeat-x;
display: block;
height: 31px;
margin-top: 50px;
position: absolute;
width: 210px;
}
. Here's the result I get on Google Chrome:
Which is what I expect. However, Firefox and IE9 display this:
I'd like to know, which one is the standards-compliant result?
The fonts can be found here: http://www.google.com/webfonts/family?family=Syncopate&subset=latin and the textGradient.png is just a gradient image.
Despite the contrived example (all the "acid" stuff is completely irrelevant), this is actually a question about vertical alignment, and in particular, vertical-align:sub. As far as I can see, neither css2.1 nor css3 defines how far vertical-align:sub should shift the text. They simply say
sub
Lower the baseline of the box to the proper position for subscripts of the parent's box. (This value has no effect on the font size of the element's text.)
So there is no standard, Chrome has just chosen a different value to Firefox.
I suggest using something like vertical-align: -10%; instead.
I'm pretty sure that acid:xmlns should be xmlns:acid:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:acid="http://acid/">
<head>
<title>Acid4 Test</title>
<link rel="stylesheet" type="text/css" href="acid4.css" />
</head>
<body>
<h1><acid:textGradient></acid:textGradient>Acid<span>4</span></h1>
</body>
</html>
Of course, I'm assuming that xmlns:acid is not actually "http://acid/", because that refers to a user's local page on localhost.
加载中,请稍侯......
精彩评论