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 で取得した結果は次のとおりです。

Google Chrome での Acid4 テスト結果

これは私が期待するものです。ただし、Firefox と IE9 では次のように表示されます。

Firefox および Internet Explorer 9 での Acid4 テスト結果

知りたいのですが、基準に準拠した結果はどれですか?

フォントは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 に答える