如何避免空格锚下划线w/o改变编码风格？

Question

看看下面的小提琴：

http://jsfiddle.net/DNhAk/14/

当您有一个文本包裹在锚/链接中的图像时，代码中图像和文本之间的空白会在文本之前的呈现页面中创建一个带下划线的空白。

当没有图像时，即使代码中有空白，也没有下划线空白。

我能看到避免带下划线的空白的唯一方法是在代码中消除空白。但是我讨厌为了改变呈现页面的显示而改变我的编码风格。无论如何，为了操纵页面的显示而修改HTML是错误的。这就像使用换行符（

是否有一个对我来说不太明显的CSS属性用于修复此问题？

由于某种原因，人们正在挂起我在代码中的图像边框和边距。我把它们放在那里只是为了让它看起来好看。它们与问题无关，因此我将它们删除并更新了小提琴，以便人们能够更清楚地了解问题所在。




Answer 1

您正在经历的行为是规范的一部分（http://www.w3.org/TR/html401/struct/text.html ) :

对于除PRE以外的所有超文本标记语言元素，空格序列分开单词（我们在这里使用术语单词来表示非空格字符序列）。当格式化文本时，用户代理应该识别这些单词，并根据特定书面语言（脚本）和目标媒体的约定来布局它们。

这种布局可能涉及在单词之间放置空格（称为单词间空格），但单词间空格的约定因脚本而异。例如，在拉丁语脚本中，字间空间通常呈现为ASCII空间（），而在泰语中，它是零宽度的字分隔符(​). 在日语和汉语中，通常根本不呈现单词间空间。

因此，通过在标记中添加一个后跟空白（换行符）的元素（img），您指示代理将您的图像解释为“单词”，并根据代理设置的语言添加空白。如果要从结果中删除此空白，则需要将其从标记中删除。

或者，您可以从标记中完全删除图像，并将其作为锚上的背景，从而从标记中删除任何演示片段。这里的例子：

<a href='#' class="imglink">
There is
<em>no</em>
underlined whitespace at beginning of this text</a>

CSS:

.imglink {
min-height: 50px;
background: transparent url("http://www.cadcourse.com/winston/Images/SoccerBall.jpg") no-repeat;
background-size: 50px 50px;
display: block;
padding-left: 55px;
line-height: 50px
}

当然，这种方法有一些缺点，但它是一种潜在的解决方案，这取决于您的其他约束条件。

http://jsfiddle.net/hellslam/pvHK8/

Answer 2

您可以使用一些CSS模拟效果：

img {
    border: 1px solid #CCC;
    padding: 10px;
    vertical-align: middle;
    float:left;
}

a {
    display:block;
    height:70px;
    line-height:70px;
}

http://jsfiddle.net/DNhAk/8/

Answer 3

您可以为a元素设置CSS，如下所示：

a {
    display: inline-block;
}