Текстовый штрих в CSS за пределами букв

Question

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

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

HTML, выглядит следующим образом:

<div class="hcontainer" 
    <h2>A Framework For Web Artisans</h2> 
    <span class="h2white">A Framework For Web Artisans</span> 
</div> 

CSS-так:

h2{font-size:2em; 
margin: 10px 0; 
color:#234F70; 
-webkit-text-stroke: 10px #531A16; 
-webkit-text-fill-color:#FFF; 
letter-spacing:-2px; 
position:absolute; 
top:10px; 
left:0px;} 

.h2white{font-family:dom_bold,arial black; 
font-size:2em; 
margin: 10px 0; 
color:#FFF; 
position:relative; 
top:10px; left:0px; 
letter-spacing:-2px; 
position:absolute;} 

.hcontainer{position:relative;clear:both;height:2em;} 

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

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

http://jsfiddle.net/calder12/9M7YZ/

Answer 1

Я не очень понимаю, что это означает, что «проблема делает, что высота динамической, так что я могу пространство элементов должным образом.» Но если вы не хотите объявлять высоту на .hcontainer, вы можете использовать отрицательное верхнее поле на .h2white, чтобы поместить его поверх красного h2 вместо использования абсолютного позиционирования. Как так:

http://jsfiddle.net/9M7YZ/10/

.h2white{ 
    font-family:lemon; 
    font-weight:bold; 
    font-size:4em; 
    color:#FFF; 
    letter-spacing:-2px; 
    margin-top:-86px; 
    position:absolute; 
}