Соответствует ли это стандартам? - PullRequest
Новая
       67

Соответствует ли это стандартам?

3 голосов
/ 06 июня 2011

Вот мой код: 

<!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 - просто градиентное изображение.

Ответы [ 2 ]

5 голосов
/ 06 июня 2011

Несмотря на надуманный пример (все «кислотные» вещи совершенно неактуальны), на самом деле это вопрос вертикального выравнивания, в частности, vertical-align:sub. Насколько я вижу, ни css2.1, ни css3 не определяют, насколько vertical-align:sub должен сдвигать текст. Они просто говорят

суб

Опустите базовую линию окна до надлежащего положения для подписчиков родительский ящик. (Это значение не имеет влияние на размер шрифта текст элемента.)

Так что стандарта нет, Chrome просто выбрал значение, отличное от Firefox.

Я предлагаю использовать что-то вроде vertical-align: -10%;.

0 голосов
/ 06 июня 2011

Я почти уверен, что 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.

...