<table>

以下是说明我的问题的参考HTML文档:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Box model test</title>
        <style type="text/css">
            html,body { margin:0; padding:0; background-color:#808080;}
            #box { position:absolute; top:20px; left:20px; background-color:Green; }
            #tbl { position:absolute; top:20px; left:40px; background-color:Red; }
            .common { width:20px; height:30px; border-bottom:solid 1px black; }
        </style>
    </head>
    <body>
        <div id="box" class="common"></div>
        <table id="tbl" class="common"></table>
    </body>
</html>

HTML5 doctype和X-UA兼容元标记的组合应该将任何现代浏览器切换到它支持的最符合标准的模式。文档包含两个绝对定位的元素,一个 <div> 和 <table> . 它们并排排列,宽度、高度和边框完全相同。出乎意料的是,我测试的所有浏览器都会将文档呈现为这样:

alt text http://img204.imageshack.us/img204/853/screen1tu.png

这个 <部门>

<表> 但是,渲染内容区域时,其高度为29像素(红色像素),下方有一个边框像素(总高度为30像素,因此在本例中,CSS高度被解释为“包括边框”)。

<表>

附言