将"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"标签,边框会出现:

<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;
}