Ry-*_*Ry- 3 css xhtml standards-compliance xhtml-1.0-strict css3
这是我的代码:
<!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>
Run Code Online (Sandbox Code Playgroud)
和样式表:
@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;
}
Run Code Online (Sandbox Code Playgroud)
.以下是我在Google Chrome上获得的结果:

这是我的期望.但是,Firefox和IE9显示了这个:

我想知道,哪一个是符合标准的结果?
可以在此处找到字体:http://www.google.com/webfonts/family? family = Syncopate&subset = label,textGradient.png只是一个渐变图像.
尽管有一个人为的例子(所有"酸"的东西都完全无关紧要),但实际上这是一个关于垂直对齐的问题,特别是vertical-align:sub.据我所知,css2.1和css3都没有定义vertical-align:sub应该移动文本的距离.他们只是说
子
将框的基线降低到父框的下标的正确位置.(此值对元素文本的字体大小没有影响.)
因此没有标准,Chrome刚刚为Firefox选择了不同的价值.
我建议使用类似的东西vertical-align: -10%;.
| 归档时间: |
|
| 查看次数: |
220 次 |
| 最近记录: |