如何在不改变编码风格的情况下避免空白锚下划线？答案

【问题标题】：How to avoid whitespace anchor underline w/o changing coding style?如何在不改变编码风格的情况下避免空白锚下划线？
【发布时间】：2012-04-17 18:03:53
【问题描述】：

看看下面的小提琴：

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

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

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

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

是否有一个对我来说不太明显的 CSS 属性可以用来解决这个问题？

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

【问题讨论】：

Ignore whitespace in HTML的可能重复
当我在 Chrome 中查看它们时，它们都有下划线的空白。
@Diodeus - 他专门指的是第一个例子。您可以看到下划线是如何在U 之前稍微延伸的。我同意这会让我发疯，因为他正在创建易于阅读的 html，并因他的布局改变而受到惩罚。
这不是完全重复的，因为white-space-collapse: discard; 在这种情况下似乎没有效果。
@Jakobud - 如果您阅读那里的答案，您会看到 white-space-collapse: discard; 尚未被任何浏览器实现（这就是它不起作用的原因）。最新的规范现在已将其重命名为 text-space-collapse:trim-inner（仍未实现）。这个 SO 问题也涉及到为什么会发生这种情况以及围绕它进行编码的方法（所有这些似乎都很糟糕）。所以我同意它不能解决你的问题，但我仍然认为它是重复的。

标签： html css

【解决方案1】：

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

a {
    display: inline-block;
}

【讨论】：

【解决方案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/

【讨论】：

不错的方法，但在此示例中，您必须浮动图像并硬编码锚点的高度。
我认为这与目前可用的一样好。
两年后对一个已接受的问题的随机投票，这显然对 OP 有帮助。喜欢它。
我猜投反对票是因为 Rohit 的回答看起来更简洁，副作用也更少。

【解决方案3】：

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

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

这种布局可能涉及在词之间放置空格（称为词间空间），但词间空间的约定因脚本而异。例如，在拉丁语脚本中，字间距通常呈现为 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/

【讨论】：

关于规范的有趣说明。谢谢。此外，由于多种原因，无法将图像移动到 CSS。不过还是谢谢。

【解决方案4】：

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

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

CSS：

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

【讨论】：

这是一个不错的解决方案，但 OP 不希望改变他的结构，我原则上同意这一点。它也没有删除空格，现在我考虑一下，我有点不清楚他是否想要那里的空格。

【解决方案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>

【讨论】：

如果包括空格在内的整个区域都被视为链接的一部分，那么您不应该从 jsfiddle 的第三个示例中看到类似的行为吗？

【解决方案6】：

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

编辑

澄清一下：

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

CSS 在这方面的行为符合预期：它使用下划线设置锚的文本内容（包括空格），因为您没有覆盖锚中文本内容的该行为。

删除空格并没有改变编码风格，而是改变了内容。碰巧这将消除您面临的样式问题。

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

我要指出的是，删除空格并没有以任何有意义的方式改变内容的语义（当然不是视觉上的，因为无论如何你都想隐藏它，所以它唯一可能产生的影响是非- 视觉代理，其中大多数在这种情况下无论如何都不会以有意义的方式传达间距）。

事实上，我怀疑那个空格字符的意图是更面向表示而不是面向语义。

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

有时您会更改文档以同时满足您的语义需求和样式需求 - 只要您传达相同的含义和逻辑信息流，这对于使用内容。

【讨论】：

您不应该更改 HTML 内容来影响呈现页面的呈现。这就是我的问题的全部目的。
在这种情况下，空格不提供语义价值。空格被认为与超链接文本内容中的任何其他字符相同；我不知道有选择地将样式应用于特定字符。您可以将空格包装在 span 标签中，并将 span 的内容设置为不带下划线，但这对 HTML 的改动更大。摆脱空间保留了内容的语义，并允许您有效地对其进行样式设置。

【解决方案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>

【讨论】：

【解决方案8】：

尝试使用边距，而不是填充

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

【讨论】：

不确定这与问题有什么关系。我认为你误读了这个问题......