doctype引起的布局问题

Question

doctype引起的布局问题

如果没有doctype声明,以下代码就可以了:

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

Run Code Online (Sandbox Code Playgroud)

但添加doctype后:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Run Code Online (Sandbox Code Playgroud)

"tr"之间有间距,即使cellspacing和cellpadding都为零.

Answer 1

Ion*_*tan 5

不使用DOCTYPE,或者都有doctype,但它是由一个XML的序幕之前的HTML页面(我相信这一个只适用于IE)在它叫什么渲染怪癖模式.另一种渲染模式是标准模式.

现在,您的问题是由于IMG元素是内联元素,这意味着,在标准模式下,它们下面会有一点空间.这不适用于怪癖模式.

最快的解决方案是声明display:block那些IMG元素.有关Mozilla开发人员中心此问题的更多信息.

归档时间：	16 年，11 月前
查看次数：	406 次
最近记录：	14 年，4 月前