Интервал между текстами и теги в теге H1 несовместимы между браузерами - PullRequest
Новая
       40

Интервал между текстами и теги в теге H1 несовместимы между браузерами

0 голосов
/ 17 января 2012

Я создаю персональный сайт, используя HTML5 и CSS3. На прикрепленном изображении вы можете быстро увидеть, в чем проблема. Я не могу найти причину этого, так как код кажется действительным. Я думаю, это может быть связано с особенностями браузера, но я просто не знаю, какие именно.

Меня не так беспокоит то, что Opera не отображает правильное начертание шрифта, а также то, что я сталкиваюсь с непоследовательным пробелом или отступом. Firefox - худший из всех.

Inconsistent letter spacing in H1 tag

Вот HTML-код (кстати, я использую сетку 960): 

<div id=body-wrap class="container_12">
<header class="container_12">
    <hgroup>
        <div class="grid_9">
            <h1>THIS IS A TITLE</h1>
        </div>
        <div id=lang class="grid_3">
            <a href=#>
                <img src=esp_64.png alt="Bandera de España">
            </a>
            <a href=#>
                <img src=cat_64.png alt="Senyera Catalana">
            </a>
            <a href=#>
                <img src=eng_64.png alt="British Union Jack">
            </a>
        </div>
    </hgroup>
</header>

Вот соответствующий CSS для HTML выше: 

h1 { font-size: 55px }
header { padding: 10px 0 }
header div h1 {
    font-family: "PTSansBold", Helvetica, sans-serif;
    color: white;
    background-color: #0a7bb4;
    text-transform: capitalize;
    padding: 0 0 0 5px;
    letter-spacing: 1px;
    word-spacing: 3px;
    height: 70px
}

Заранее спасибо.

1 Ответ

0 голосов
/ 17 января 2012

если проблема связана только с гекконами, вы можете попытаться внести некоторые изменения с помощью более специфических свойств CSS, таких как font-size-Adjust или font-stretch (доступно из Firefox 9.0 )

, если это не помогло, попробуйте также установить letter-spacing: 0 только для firefox (например, с некоторым медиа-запросом, который понимает только геккон). Этого должно быть достаточно, чтобы заголовок был почти одинаковым и будет поддерживаться даже в более старой версии Firefox.

...