3

这是我的代码：

<!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 测试结果

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

Acid4 在 Firefox 和 Internet Explorer 9 上的测试结果

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

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

4

2 回答 2

5

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

子

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

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

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

于 2011-06-06T00:36:16.427 回答
0

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

于 2011-06-05T22:27:37.393 回答