CSS Двойная рамка с h1 и span - PullRequest
Новая
       26

CSS Двойная рамка с h1 и span

0 голосов
/ 03 апреля 2012

Я хочу перекрыть «нижнюю границу» <span> выше нижней границы <h1>.В Google Chrome и Opera отлично работает, но в Firefox разница составляет 1 пиксель.Я пробовал много методов, но всегда выглядит по-другому в Firefox.Есть ли способ улучшить это в Firefox или использовать другие методы, которые не обязательно охватывают?.

Извините за мой плохой английский: (.

Мой HTML: 

<h1><span>My Title Test<span></h1>​

CSS: 

h1 {
 border-bottom:1px solid #ccc; 

}
span{
border-bottom:1px solid #000; 
display: inline;
}

Демонстрация: http://jsfiddle.net/9WuBk/

1 Ответ

1 голос
/ 03 апреля 2012

Встроенные границы обычно не совпадают с границами своих родительских блоков.Учитывая то, как разные браузеры по-разному отображают встроенный контент, это в конечном итоге оказывается несовместимым.

Вы можете обойти этот конкретный случай, сделав свой <span> встроенный блок для нормализации положения границ, а затем предоставив свой <span> a -1px нижнее поле, чтобы сдвинуть его вниз (точнее, потяните границу <h1> вверх): 

h1 {
    border-bottom:1px solid #ccc;
}
span {
    border-bottom:1px solid #000; 
    display:inline-block;
    margin-bottom:-1px;
}

Обновленная скрипка

...