如何勾勒出长跨度标签？

Question

需要如下的大纲框：

HTML代码为：

<p>We <span>prefer questions that can be answered, not</span> just discussed.</p>

很难获得大纲框的左上角和右下角的坐标。

使用：

outline: 2px red solid;

只能在chrome中使用，但在firefox中失败。并且在<p>的行高为300％时，铬也失败了。

Answer 1

像这样：

CSS：

p {
    width: 220px;
}

span {
    outline: 2px red solid;
}

因此，您可以根据需要调整范围，只需将outline放在上面并完成。很简单呃？ ：d

DEMO HERE

注意：正如评论中所指出的，这似乎在Firefox中不起作用。现在寻找解决方案。

Answer 2

如果您知道如何使用CSS3，请使用它。否则，请在您的html页面中插入以下内容。

<style type="text/css">
    span {
         border: 5px solid red;
    }
</style>