css - 将 "a"标签放在 "img"标签外时出现边框

Question

没有“a”标签，没问题:

<style type="text/css">
body {
    font: 1.0em verdana, arial, sans-serif;
}

* {
    margin:0; padding:0;
}

</style>

<table cellpadding="0" cellspacing="0" border="0">
        <tr>
                <td><img src="/images/title_equipment.gif" /></td>
                <td><img src="/images/about.gif" /></td>
                <td><img src="/images/services.gif" /></td>
                <td><img src="/images/systems.gif" /></td>
                <td><img src="/images/equipment_new.gif" /></td>
                <td><img src="/images/equipment_used.gif" /></td>
                <td><img src="/images/news.gif" /></td>
                <td><img src="/images/contact.gif" /></td>
        </tr>
        <tr>
                <td><img src="/images/balers.gif" /></td>
        </tr>
</table>

但是如果在"img"之外加上"a"标签，border comes:

<style type="text/css">
body {
    font: 1.0em verdana, arial, sans-serif;
}

* {
    margin:0; padding:0;
}

</style>

<table cellpadding="0" cellspacing="0" border="0">
        <tr>
                <td><a href="#"><img src="/images/title_equipment.gif" /></a></td>
                <td><a href="#"><img src="/images/about.gif" /></a></td>
                <td><a href="#"><img src="/images/services.gif" /></a></td>
                <td><a href="#"><img src="/images/systems.gif" /></a></td>
                <td><a href="#"><img src="/images/equipment_new.gif" /></a></td>
                <td><a href="#"><img src="/images/equipment_used.gif" /></a></td>
                <td><a href="#"><img src="/images/news.gif" /></a></td>
                <td><a href="#"><img src="/images/contact.gif" /></a></td>
        </tr>
        <tr>
                <td><img src="/images/balers.gif" /></td>
        </tr>
</table>

Answer 1

这是一些浏览器的默认行为，包括 IE。您需要将此添加到您的 CSS:

a img {
    border:0;
}