css - 如何从图像背景中删除蓝线

Question

我有非常简单的电子邮件通讯共享图标代码。我的问题是图像附近有蓝色背景。我使用 css 为图像和 anchor 标记删除了轮廓和边框。但我运气不好。此处代码:http://jsfiddle.net/o70cd4g8/

我的代码:

<table align="center" width="500">
    <tbody>
        <tr>
            <td align="right">
                <div align="right" style="padding-right:0px">
                    <a href="" target="_blank">
                        <img border="0" style="border:0" src="https://s-passets-ec.pinimg.com/images/about/buttons/small-p-button.png" align="absmiddle" width="16" height="16" alt="Follow Me on Pinterest" class="CToWUd">
                    </a>
                    <a href="" target="_blank">
                        <img height="16" width="16" border="0" style="border:0" align="absmiddle" src="http://www.seattleu.edu/uploadedImages/MarCom/youtube_16px.png" alt="youtube" title="youtube" class="CToWUd">
                    </a>
                    <a href="" target="_blank">
                        <img height="16" width="16" border="0" style="border:0" align="absmiddle" src="http://www.nextbyte.com.ar/images/social/Twitter-16px.gif" alt="twitter" title="twitter" class="CToWUd">
                    </a>
                    <a href="" target="_blank">
                        <img height="16" width="16" border="0" style="border:0" align="absmiddle" src="http://sfcv.org/sites/files/images/facebook-16px.png" alt="facebook" title="facebook" class="CToWUd">
                    </a>
                    <a href="" target="_blank">
                        <img height="16" width="16" border="0" style="border:0" align="absmiddle" src="http://perishablepress.com/wp/wp-content/images/2006/feed-collection/feed-icon_orange-16px+.png" alt="RSS" title="RSS" class="CToWUd">
                    </a>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

你必须使用text-decoration: none

table > tbody > tr > td > div > a {
    text-decoration: none;
}

table > tbody > tr > td > div > a {
    text-decoration: none;
}

<table align="center" width="500">
    <tbody>
        <tr>
            <td align="right">
                <div align="right" style="padding-right:0px"> <a href="" target="_blank">
                        <img border="0" style="border:0" src="https://s-passets-ec.pinimg.com/images/about/buttons/small-p-button.png" align="absmiddle" width="16" height="16" alt="Follow Me on Pinterest" class="CToWUd">
                    </a>
 <a href="" target="_blank">
                        <img height="16" width="16" border="0" style="border:0" align="absmiddle" src="http://www.seattleu.edu/uploadedImages/MarCom/youtube_16px.png" alt="youtube" title="youtube" class="CToWUd">
                    </a>
 <a href="" target="_blank">
                        <img height="16" width="16" border="0" style="border:0" align="absmiddle" src="http://www.nextbyte.com.ar/images/social/Twitter-16px.gif" alt="twitter" title="twitter" class="CToWUd">
                    </a>
 <a href="" target="_blank">
                        <img height="16" width="16" border="0" style="border:0" align="absmiddle" src="http://sfcv.org/sites/files/images/facebook-16px.png" alt="facebook" title="facebook" class="CToWUd">
                    </a>
 <a href="" target="_blank">
                        <img height="16" width="16" border="0" style="border:0" align="absmiddle" src="http://perishablepress.com/wp/wp-content/images/2006/feed-collection/feed-icon_orange-16px+.png" alt="RSS" title="RSS" class="CToWUd">
                    </a>

                </div>
            </td>
        </tr>
    </tbody>
</table>

Reason: text-decoration: underline; is applied to tag by default browser stylesheet, so if you want to over ride it or if you want that none of the tags on your website should have an underline than simply use this