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

Question

看看下面的小提琴：

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

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

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

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

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

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

Answer 1

你可以用一些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 2

为不同的元素使用两个单独的链接，这些链接位于当前内部。我还没有看到一个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 3

，而不是填充，尽量保证金

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

Answer 4

这是预期的行为，因为有图像后的空格： 您必须更改您的html结构E，改用：

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

CSS：

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

Answer 5

获取的图像和文字之间的锚摆脱空间（这是什么东西被下划线）。在你的CSS中，给img'margin-right：10px'（或任何你想要的值）。删除填充。

编辑

澄清：

插入空格字符图像后下“的编码风格”不倒 - 你有特别编码的空间分为锚文本值。

CSS在这方面的表现与预期相同：它使用下划线对定位点（包括空格）的文本内容进行定型，因为您尚未覆盖定位点中文本内容的行为。

通过删除空格不改变您的编码风格，您正在更改内容。恰巧这会消除你所面临的造型问题。

我知道你问的是否有一种方法可以保留锚点中的空间，并使用CSS来对准该角色 - 我认为没有办法做到这一点。

我指出，通过删除空格，您不会以任何有意义的方式更改内容的语义（当然，由于您无论如何都想隐藏它，所以它唯一可能的影响是非视觉代理人，无论如何，其中大多数人并没有以有意义的方式表达间距）。

事实上，我怀疑这个空间角色的意图是比面向语义的面向表达更多。以用于演示

涂改HTML并不理想，但通常它不是改变你的HTML本身 - 这是关于改变的含义，你用HTML输送。在这种情况下，我认为改变您的HTML以传达相同的含义是完全正确的。

有时候，当你改变你的文档以适应你的语义需求和你的造型需求时 - 只要你传达了相同的含义和逻辑信息流，它对于消费者来说确实不是问题内容。

Answer 6

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

a { 
    display: inline-block; 
} 

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

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

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

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

所以加入，然后在您的标记空白（行）的元素（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/