Question

看看以下小提琴：

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

如果您的图像包含锚/链接中的文本，则图像与代码中文本之间的空格会在文本之前的渲染页面中创建带下划线的空白。

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

我能看到避免这个带下划线的空格的唯一方法就是消除代码中的空格。但我讨厌改变我的编码风格，以改变呈现页面的呈现方式。无论如何，改变你的HTML以操纵页面的呈现是错误的。这就像使用换行符（<br/>）在元素之间添加空格而不是使用CSS。

是否有一个不太明显的CSS属性用于解决此问题？

更新出于某种原因，人们会挂在我在代码中的图像边框和边距上。我只把它们放在那里让它看起来不错。它们与问题无关，所以我删除了它们并更新了小提琴，以便人们更清楚地了解问题所在。

Answer 1

您可以像这样设置a元素的CSS：

a {
    display: inline-block;
}

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

您遇到的行为是规范（http://www.w3.org/TR/html401/struct/text.html）的一部分：

对于除PRE之外的所有HTML元素，空格序列分开＆＃34;单词＆＃34; （我们使用术语＆＃34;单词＆＃34;这里表示＆＃34;非空白字符序列＆＃34;）。格式化文本时，用户代理应根据特定书面语言（脚本）和目标媒体的惯例识别这些单词并将其排列。

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

因此，在标记中添加一个元素（img）后跟空格（换行符），指示代理将您的图像解释为＆＃34; word＆＃34;，并根据代理语言添加适当的空格已设置。如果要从结果中删除此空格，则需要将其从标记中删除。

或者，您可以完全从标记中删除图像，并将其作为背景放置在锚点上，从而消除标记中的任何演示文稿。示例：

<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 4

这是预期的行为，因为图像后面有空格：你必须改变你的html结构，改为使用：

<a href='#'>
<img src='SoccerBall.jpg'/> <span>Your text</span>
</a>

CSS：

a{text-decoration:none;}
a>span{text-decoration:underline;}

Answer 5

为不同的元素使用两个单独的链接，这些元素位于当前内部。我还没有看到CSS修复。这是因为整个区域被认为是链接。这种解决方法从现在开始起作用。

<a href='#'>
<img src='http://www.cadcourse.com/winston/Images/SoccerBall.jpg'
  width='50' height='50'/>
</a>
<a href='#'>
No Underlined Whitespace
</a>

Answer 6

摆脱图像和文本之间锚点的空间（这是带下划线的）。在你的CSS中，给img'margin-right：10px'（或你想要的任何值）。删除填充。

修改

澄清：

在图像不属于“编码样式”之后插入空格字符 - 您已经专门将空格编码为锚点的文本值。

CSS在这方面表现得如此：它使用下划线为锚点（包括空格）的文本内容设置样式，因为您没有覆盖锚点中文本内容的行为。

通过删除您不会改变编码风格的空间，您正在改变内容。碰巧这将消除您所面临的样式问题。

我知道你问是否有办法保留锚中的空间并用CSS定位该角色 - 我认为没有办法做到这一点。

我指出，通过删除空间，你不会以任何有意义的方式改变内容的语义（当然不是在视觉上，因为你想要隐藏它，所以唯一可能的效果是非 - 视觉代理人，其中大部分都不会在这种情况下以有意义的方式传达间距）。

事实上，我怀疑该空间字符的意图更多是面向表达的，而不是面向语义的。

为了演示目的而改变HTML并不理想，但通常不是改变HTML本身 - 而是改变用HTML传达的含义。在这种情况下，我认为改变HTML以传达相同含义是完全正确的。

有些时候，您更改文档以满足您的语义需求和样式需求 - 只要您传达相同的意义和逻辑信息流，对于消费者而言，这实际上不是问题。内容。

Answer 7

我当然同意你的问题并认为它经过深思熟虑并提出了一个非常好的观点。正如本SO question中所述，有一个名为text-space-collapse的实验性CSS3属性，其建议值为discard, trim-inner, trim-before and trim-after，可用于解决此问题。

我认为在text-space-collapse实施之前您将找到的最佳解决方案是稍微改变您的标记。您可以在一个范围中包装文本，然后使用display: table作为一个解决方案。

http://jsfiddle.net/CPh82/

a { display:table; }

a > * { display: table-cell; vertical-align: middle; }

<a href='#'>
    <img src='http://www.cadcourse.com/winston/Images/SoccerBall.jpg' width='50' height='50'/>
    There is underlined whitespace at beginning of this text
</a>

Answer 8

代替填充，尝试边距

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

如何避免空格锚下划线没有改变编码风格？

8 个答案: