Question

这是我的代码：

<!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上获得的结果：

Acid4 test result on Google Chrome

这是我的期望。但是，Firefox和IE9显示了这个：

Acid4 test result on Firefox and Internet Explorer 9

我想知道，哪一个是符合标准的结果？

可在此处找到字体：http://www.google.com/webfonts/family?family=Syncopate&subset=latin，textGradient.png只是一个渐变图像。

Answer 1

尽管有一个人为的例子（所有“酸”的东西都完全无关紧要），但实际上这是一个关于垂直对齐的问题，特别是vertical-align:sub。据我所知，css2.1和css3都没有定义vertical-align:sub应该移动文本的距离。他们只是说

<强>子

将框的基线降低到下标的正确位置   父母的盒子。（这个值没有   对字体大小的影响   元素的文字。）

因此没有标准，Chrome刚刚为Firefox选择了不同的价值。

我建议使用类似vertical-align: -10%;的内容。

Answer 2

我非常确定acid:xmlns应为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>

当然，我假设xmlns:acid实际上不是"http://acid/"，因为它指的是本地主机上用户的本地页面。

这是符合标准的结果吗？

2 个答案: