字母外的CSS文本笔划

好吧，我已经为此挣扎了一段时间，我已经拥有了我想要的外观，但是现在我正在努力定位这些物品。基本上，我想要一个外部带有笔划的笔划文本，这意味着webkit文本笔划是无用的

所以我想我会把两个文本元素放在彼此的上面，这样做。这非常有效，除了我使用position:absolute，元素基本上没有高度

HTML如下所示：

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

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需要有一个设置的高度，因为它所包含的元素是绝对定位的，因此没有高度，会扰乱流程。问题是使该高度动态，以便我可以适当地间隔元素

我可以为每个标题制作一个单独的容器，但这似乎有点过分。有谁能想出一个更好的方法来做我在这里要做的事吗？还是解决身高问题的方法

---

我真的不明白“问题是使该高度动态化，以便我可以正确地分隔元素”是什么意思。但是，如果您不想在.hcontainer上声明高度，可以在.h2white上使用负上边距将其放置在红色h2的顶部，而不是使用绝对定位。像这样：

---

我真的不明白“问题是使高度动态化，以便我可以正确地分隔元素”这意味着什么。但是如果您不想在.hcontainer上声明高度，可以在.h2white上使用负上边距将其放置在红色h2的顶部，而不是使用绝对定位。像这样：

---

当然，如果你想在非webkit浏览器中使用这些功能，我会把它做成一个图像。是的，我几天前就知道了。遗憾的是，我不能使用图像，因为很多标题都是数据库填充的。非webkit浏览器的边界要小得多，但这就是生活，直到它们都开始呈现相同的边界。谢谢你的回答，即使晚了几天，哈哈。当然，如果你想让这些在非webkit浏览器中工作，我会把它做成一个图像。是的，我几天前就知道了。遗憾的是，我不能使用图像，因为很多标题都是数据库填充的。非webkit浏览器的边界要小得多，但这就是生活，直到它们都开始呈现相同的边界。谢谢你的回答，即使晚了几天，哈哈。

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