HTML/CSS：重叠文本周围的公共边框答案

【问题标题】：HTML/CSS: Common border around overlapping textsHTML/CSS：重叠文本周围的公共边框
【发布时间】：2012-05-29 02:33:57
【问题描述】：

如何编码？

当我们有这个时：

作为

<html>
    <head>
        <style>             
            h2
            {
                letter-spacing:4pt;
                font-size:40pt;
                color:blue;
                text-align:center;
                position:absolute;
                top:0px;
            }
            h3
            {
                letter-spacing:4pt;
                font-size:40pt;
                color:blue;
                text-align:center;
                position: absolute;
                top:20px;
                left:20px;
            }
        </style>
    </head>

    <body>
        <h2>All right, Mate?</h2>
        <h3>All right, Mate?</h3>
    </body>
</html>
</html>

...不更改原始功能/标签。
只添加（或修改）一点。

【问题讨论】：

标签： html css styles position border

【解决方案1】：

将其包裹在一个 div 中并设置边框。

尝试将您的 html 更改为：

<div>
    <span id="h2">All right, Mate?</span>
    <span id="h3">All right, Mate?</span>
</div>

还有你的css：

div {
    padding : 5px;
    border: 3px solid red;
    height: 70px;
    width: 440px;
}
div span {
    width: 420px;
    display: block;
    letter-spacing:4pt;
    font-size:40pt;
    color:blue;
    position: relative;
}
div span#h2
{
    top:0px;
}
div span#h3
{
    top:-50px;
    left:20px;
}

小提琴：http://jsfiddle.net/maniator/PJT9V/

【讨论】：

我认为你的意思是链接到这个版本的小提琴：jsfiddle.net/maniator/PJT9V/2
@SurrealDreams 不，不，我没有...因为这与基本小提琴相同...
@Neal，我无法更改我的原始代码（h2、h3 等）... ... 请告诉我一些必要的添加/修改

【解决方案2】：

您可以将它们都放在一个包装器中，或者您可以尝试text-shadow 解决方案 - 类似于http://dabblet.com/gist/2769678

【讨论】：

【解决方案3】：

您可以将position 设置为relative 并将它们放入一个包装器中，并为其定义一个固定的width 和height。

HTML

<div class="wrapper">
    <h2>All righ, Mate?</h2>
    <h3>All right, Mate?</h3>
</div>

CSS

.wrapper 
{
    border: 3px solid #ff0000;
    position: relative;
    width: 448px;
    height: 89px;
}    
h2
{
    letter-spacing:4pt;
    font-size:40pt;
    color:blue;
    text-align:center;
    position:absolute;
    top:0px;
}
h3
{
    letter-spacing:4pt;
    font-size:40pt;
    color:blue;
    text-align:center;
    position: absolute;
    top:20px;
    left:20px;
}

有必要定义一个height，因为两个元素都将position设置为absolute，这使得元素从文档的正常流程中移除，所以父元素，在这种情况下是包装器, 不会将绝对定位子级的 height 添加到它自己的位置。
另外请注意，将父级的position 定义为relative 将影响子级的位置，因为它们的位置将根据父级的位置计算。如果您不希望出现这种行为，只需从 .wrapper 规则中删除 position: relative。

Live example

希望对你有帮助。

【讨论】：

嗯...虽然宽度可能会更多
@popstack 是的，我只在 Chrome 上测试过。在 Firefox 和 IE 中，width 太小了。无论如何，您可以根据需要更改它。 :)