这是我的代码:
<!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>
和样式表:
@font-face {
src: url('syncopateBold.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;
}
.这是我在 Google Chrome 上得到的结果:
这是我所期望的。然而，Firefox 和 IE9 显示这个:
我想知道，哪个是符合标准的结果？
字体可以在这里找到:http://www.google.com/webfonts/family?family=Syncopate&subset=latin而 textGradient.png 只是一个渐变图像。
最佳答案
尽管这个人为的例子(所有“酸”的东西完全无关)，这实际上是一个关于垂直对齐的问题，特别是 vertical-align:sub。据我所知，css2.1 和 css3 都没有定义 vertical-align:sub 应该将文本移动多远。他们只是说
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.)
所以没有标准，Chrome 只是选择了与 Firefox 不同的值。
我建议改用 vertical-align: -10%; 之类的东西。
关于xhtml - 这是符合标准的结果吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6245937/