CSS заголовок при использовании line-height для сдвига границы?

Question

Я использую следующий CSS:

h2 {
    font-weight: normal;
    border-bottom: 1px solid #DDD;
    font-size: 1.6em;
    font-style: italic;
}

h2 span {
    position: absolute;
    top: 7px;
    padding-right: 6px;
    background-color: #F9F9EE;
}

При использовании как:

<h2><span>abc</span></h2>

Дает следующий эффект:

abc ------------------

Текст 'abc' - это заголовок, а пунктирная линия - сдвигаемая граница. Следующий подход работает хорошо, если вы используете его только один раз на странице. Мой вопрос состоит в том, как я могу достичь того же эффекта, не используя абсолютное позиционирование или даже, возможно, высоту строки, поскольку я подозреваю, что один или оба виновны.

Я помню, что один и тот же эффект использовался в нескольких блогах, но этот URL ускользнул от меня.

Спасибо. :)

Answer 1

Как уже упоминал Рори, использование относительного положения на теге H2 решает проблему без использования изображения.

h2 {
    font-weight: normal;
    border-bottom: 1px solid #DDD;
    font-size: 1.6em;
    font-style: italic;
    position:relative;
}

h2 span {
    position: absolute;
    top: -0.8em;
    padding-right: 6px;
    background-color: #F9F9EE;
}

Это работает в трех браузерах, которые я использую для тестирования (IE, Firefox и Chrome).

Answer 2

Я не совсем уверен, что вы пытаетесь сделать и в чем именно проблема, но добавление position: relative; к стилю h2 создаст контейнер позиционирования, в котором диапазон position: absolute; будет вычислять его значения.

Answer 3

Попробуйте это:

h2 {
  font-weight: normal;
  border-bottom: 1px solid #DDD;
  font-size: 1.6em;
  height: 0.75em;
  margin-bottom: 1.85em;
  overflow: visible;
  font-style: italic;
}

h2 span {
  padding-right: 6px;
  background-color: #F9F9EE;
}

Answer 4

Мой любимый способ сделать это:

<fieldset class="blah">
    <legend>Heading</legend>
content...
</fieldset>

и затем добавьте

fieldset.blah {border-top: 1px solid #999;}

в вашем CSS. Надеюсь, это поможет.

Answer 5

Я не вижу эффекта, который вы описали в Firefox, только в IE6.

Одним из способов достижения этого эффекта является использование однопиксельного фонового изображения, выложенного черепицей горизонтально на 50% высоты div. Это не так приятно, так как вам нужно использовать изображение, но оно должно выглядеть так, как вы хотите, не влияя на HTML.

Я бы предложил что-то вроде:

h2 {
    font-weight: normal;
    font-size: 1.6em;
    font-style: italic;
    background: url(pixel.png) repeat-x 0% 50%;
}

h2 span {
    padding-right: 6px;
    background-color: #F9F9EE;
}

Я проверил это в IE6 и Firefox, используя его несколько раз на одной странице. :)