Абсолютная позиция не работает правильно в Chrome, когда содержится в относительном диапазоне

Question

У меня есть проблема, связанная с Chrome Браузером. My html содержит много тегов span, некоторые пролеты имеют свойство position: относительное css, поскольку оно содержит div с position: absolute . Div должен быть включен нижний левый угол диапазона.

Он работает нормально, но когда диапазон начинается с новой строки, возникает проблема: div.arrow расположен неправильно (смотрите изображения и код). (если вы предпочитаете: JSFiddle )

.selected {
  position: relative;
  border-bottom: 2px solid red;
  padding-bottom: 2px;
}

.arrow {
  position:absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 4px solid transparent;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: red;
}

<span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span class="selected"><div class="arrow"></div>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span>

Чтобы воспроизвести проблему, вы должны изменить размер окна, как прикрепленное изображение:

ожидаемое поведение должно быть:

У вас есть идеи для решения этой проблемы? Спасибо!

Answer 1

Вместо этого рассмотрите фон, чтобы избежать проблемы position:absolute, и вам не понадобится дополнительный элемент или псевдоэлемент. Обратите внимание, что div внутри span недействительно

.selected {
  padding-bottom: 4px;
  background:
    /* The arrow*/
    linear-gradient(to bottom left,transparent 49.5%,red 50%) bottom 2px left 0/4px 4px,
    /* The line*/
    linear-gradient(red,red) bottom/100% 2px,
    /* Backgroudn color */
    lightblue;
  background-repeat:no-repeat;
}

<span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span class="selected">foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span>

Answer 2

Просто добавьте display: inline-block; к вашему .selected классу.