Я пытаюсь нарисовать линию вокруг многострочного текста, display:inline - вроде как установка штриха для объединения созданных DOM-ректов.
Похоже, что CSS outline будет работать, но ведет себя непоследовательно во всех браузерах.
См. Код ниже, используя Chrome / Safari и Firefox:
body {
font-family: sans-serif;
font-size: 24px;
margin: 50px;
}
section {
width: 200px;
}
h2 {
font-weight: normal;
display:inline;
outline: 2px solid red;
outline-offset: 10px;
background:yellow;
}
<section>
<h2>Some random text here and there</h2>
</section>
FF просто не рисует линии так же, как другие браузеры. Есть ли способ сделать эту работу кросс-браузерной?
В Safari / Chrome
В FF
Если нет, есть ли способ добиться того же эффекта, используя некоторую комбинацию JS, SVG или, или ...