Пробел в конце интервала влияет на абсолютное позиционирование после псевдоэлемента

#html #css #dom #browser

#HTML #css #dom #браузер

Вопрос:

При разработке дизайна компонента на моем сайте я обнаружил, что добавление пробела в конец моего, span который находится внутри h2 , странным образом влияет на абсолютное позиционирование span:after . after Элемент, который я использую в качестве границы. Граница располагается после содержимого без пробела, но располагается над содержимым, когда есть пробел. Вы можете увидеть пример здесь.

Есть идеи о том, почему это будет отображаться по-другому?

HTML:

 <h2>
<span>A test</span> <!-- the border appears 'after' the content -->
</h2>
<h2>
<span>A test </span> <!-- the border appears 'over' the content -->
</h2>

css:

 h2 {
  position:relative;
  height:1.625em/1;
}
h2 span {
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: top;
  display: inline-block;
  1.625em/1 'MuseoSlab300','Times New Roman',serif;
}
span:after {
  content: "";
    border-bottom: 5px solid #7c61a0;
    position: absolute;
    bottom: 5px;
    margin-left: 8px;
    width: 100%;
}

1. Похоже на перенос, вызванный width:100% .

2. примечание: оба случая выглядят одинаково в Firefox, но я вижу разницу в Chrome.

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

4. @andi Если есть простое решение, я хотел бы его услышать. Изменение разметки на этом этапе было бы затруднительным. Спасибо.

5. @smilebomb Я так понимаю, вы хотите, чтобы это выглядело как регистр без пробелов? Вот одна из возможностей: jsfiddle.net/evvrwbLw

Ответ №1:

Я думаю, что основное различие между этими двумя случаями (с конечным пробелом и без) заключается в том, что браузер обычно переносит содержимое, при необходимости, в пробел. Итак, в первом случае (с конечным пробелом) у браузера нет выбора, кроме как увеличить ширину этого диапазона, потому что :after псевдоэлемент не может переноситься. Во втором случае браузер использует position:absolute объявление псевдоэлемента в качестве ключа для сохранения ширины исходного диапазона, и с пробелом перед псевдоэлементом браузер может затем перенести псевдоэлемент на следующую строку. Вы бы увидели этот эффект, даже если бы ширина псевдоэлемента была установлена на что-то маленькое, например, 10 пикселей вместо 100%.

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