字母外的CSS文本描边

Question

好吧，现在已经为此苦苦挣扎了一段时间，我的外观几乎是我想要的，但现在却在为元素的定位而苦苦挣扎。基本上我想要一个笔划在外面的笔划文本，这意味着 webkit 文本笔划是无用的。

所以我想我会把两个文本元素放在彼此的顶部，然后这样做。这很好用，除了因为我使用 position:absolute 元素基本上没有高度。

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;
}