这是符合标准的结果吗？答案

【问题标题】：Is this a standards-compliant result?这是符合标准的结果吗？
【发布时间】：2011-09-08 21:51:27
【问题描述】：

这是我的代码：

<!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;
}

。这是我在谷歌浏览器上得到的结果：

这是我所期望的。但是，Firefox 和 IE9 会显示：

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

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

【问题讨论】：

快速提示：您可以从*:first-child 中删除*，这是多余的。

标签： xhtml css standards-compliance xhtml-1.0-strict

【解决方案1】：

我很确定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/"，因为它指的是用户在本地主机上的本地页面。

【讨论】：

...这实际上并不重要，不是吗？无论如何固定。
@minitech：从有效性的角度来看确实如此。您只是不使用[ns]:xmlns 声明 XML 命名空间属性，而是使用 xmlns:[ns]
@minitech 是xmlns:acid 的实际值http://acid/，还是只是用占位符替换了实际值？
@mc10 - xmlns 的东西一点都不重要。该页面以 text/html 的形式提供 - 这一定是因为如果它以 XML 的形式提供，所提供的 CSS 将不会产生任何结果 - 这意味着对于浏览器，acid:textGradient 不是http://acid/ 中的元素带有前缀acid 和本地名称textGradient 的命名空间，它只是http://www.w3.org/1999/xhtml 命名空间中的一个名为acid:textGradient 的元素。
@BoltClock：我不是这个意思，我的意思是 URL 实际上并没有改变渲染，对吧？

【解决方案2】：

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

子

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

所以没有标准，Chrome只是选择了与Firefox不同的值。

我建议改用 vertical-align: -10%; 之类的东西。

【讨论】：