如何避免空白锚下划线不更改编码样式? [英] How to avoid whitespace anchor underline w/o changing coding style?
问题描述
看看下面的小提琴:
当图像中的文本用锚/链接包裹时，图像和代码中文本之间的空白将在渲染页面的文本之前创建带下划线的空白.
When you have an image with text wrapped in an anchor/link, the whitespace between the image and the text in the code creates a underlined whitespace in the rendered page right before the text.
当没有图像时，即使代码中有空格，也没有带下划线的空格.
When there is no image, there is no underlined whitespace even though there is whitespace in the code.
我看到避免这种带下划线的空白的唯一方法是消除代码中的空白.但是我讨厌更改编码风格，以更改呈现页面的外观.无论如何，改变HTML来操纵页面的显示是错误的.就像使用换行符(< br/> )来在元素之间添加空格，而不是使用CSS.
The only way I can see the avoid this underlined whitespace is to eliminate the whitespace in my code. But I hate altering my coding style in order to alter the presentation of the rendered page. Anyways, altering your HTML in order to manipulate the presentation of a page is wrong anyways. It's like using line breaks (<br/>) to add space between elements instead of using CSS.
是否有一个不太明显的CSS属性可用于解决此问题?
Is there a not-so-obvious-to-me CSS property that is used to fix this issue?
更新由于某些原因，人们开始迷上代码中的图像边框和边距.我只把它们放在那里以使其看起来不错.它们与问题无关，所以我删除了它们，并更新了小提琴，以便人们可以更清楚地了解问题所在.
UPDATE For some reason people are getting hung up on the image borders and margin that I had in the code. I only put them in there to make it look nice. They have nothing to do with the problem, so I removed them and updated the fiddle just so people can understand more clearly what the problem is.
推荐答案
您可以使用一些CSS来模拟效果:
You can emulate the effect with some CSS:
img {
border: 1px solid #CCC;
padding: 10px;
vertical-align: middle;
float:left;
}
a {
display:block;
height:70px;
line-height:70px;
}
这篇关于如何避免空白锚下划线不更改编码样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
