让a标签里的icon在hover的状态下不出下划线

有这样一个需求，一段链接文字前面加一个ICON，要求鼠标划过文字或ICON时即触发链接，也就是要求ICON要和文字本身是在一个A标签下，保持联动关系。代码结构如下，ICON做为背景写在SPAN标签里：

<a><span class="icon"></span>换一换</a>

要求的效果是这样的：

默认时

划过ICON或文字时

但是如果你够追求细节，就会发现某些浏览器的表达总是与众不同（是谁我就不点名了），当鼠标划过时它会变成这样：

搞成这个样子一定是不成的，细节和兼容性还是要追求的。

怎么办？

方法1：把字也切进图里，两张图一张字带下划线的图，一张字不带下划线的图，用A标签的HOVER伪类做两张图的背景切换。这个不是我想出来的，大家可以搜搜网上某些网站，很多人这么干。好处是达到了目地，但活字做成了死字，不和谐。

方法2：JS解决，详细方法这里不说了。好处是目地达到了，但从效率上来说，前端的原则是CSS能解决的问题就不麻烦JS出场了。

方法3：为了解决这个问题，尝试了很多写法在各个浏览器下一遍遍的测试，终于让我找到了问题的解决方法。还记得前面那段代码吗？嗯，代码不动，在CSS样式中把SPAN标签定义为FLOAT:LEFT目地就达到了。这段代码从结构上来说是没有必要使用浮动属性的，只要把SPAN定义为块元素有宽有高把ICON显示出来就好了，但是为了解决一些浏览器的兼容性问题，处了不得不写一些HACK之外，有时也不能按常理出牌。这是我们做前端同学的无奈，不过问题解决了自己的价值能够得到体现还是一件高兴的事情的，经验值又涨了，呵呵。