13

看看下面的小提琴：

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

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

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

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

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

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

4

8 回答 8

13

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

a {
    display: inline-block;
}
于 2012-04-18T05:48:00.107 回答
6

您可以使用一些 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/

于 2012-04-17T18:20:43.173 回答
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/

于 2012-04-19T15:01:33.200 回答
2

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

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

CSS：

a{text-decoration:none;}
a>span{text-decoration:underline;}
于 2012-04-17T18:24:37.170 回答
0

对不同元素使用两个单独的链接，它们位于当前 . 我还没有看到 CSS 修复。显然，这是因为整个区域都被视为链接。这种解决方法暂时有效。

<a href='#'>
<img src='http://www.cadcourse.com/winston/Images/SoccerBall.jpg'
  width='50' height='50'/>
</a>
<a href='#'>
No Underlined Whitespace
</a>
于 2012-04-17T18:08:14.473 回答
0

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

编辑

澄清：

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

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

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

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

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

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

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

有时您会更改文档以同时满足您的语义需求和样式需求 - 只要您传达相同的含义和逻辑信息流，这对于内容的消费者来说确实不是问题。

于 2012-04-17T18:28:33.690 回答
0

我当然同意你的问题，并认为这是经过深思熟虑的，提出了一个很好的观点。正如这个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>
于 2012-04-19T13:32:27.060 回答
-1

而不是填充，尝试边距

img {
    border: 1px solid #CCC;
    margin: 10px;
    vertical-align: middle;   
}​
于 2012-04-17T18:11:34.050 回答