html – 所有现代浏览器中的意外箱模型行为

发布时间：2020-12-14 18:39:09 所属栏目：资源来源：网络整理

导读：以下是一个参考 HTML文档,说明了我的问题： !DOCTYPE htmlhtml lang="en" head meta http-equiv="X-UA-Compatible" content="IE=edge" / meta http-equiv="Content-Type" content="text/html; charset=utf-8" / titleBox model test/title style type="text/

以下是一个参考 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-Compatible元标记的组合应该将任何现代浏览器切换到它支持的最符合标准的模式.该文档包含两个绝对定位的元素,< div>和< table>.它们并排排列,具有完全相同的宽度,高度和边框CSS.出乎意料的是,我测试的所有浏览器都渲染了这样的文档：

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

< div> (绿色)遵循盒子模型.内容区域高30像素(绿色像素),下方有1个像素的边框(总高度为31像素,CSS高度指令被解释为’不包括边框’).

然而,< table>呈现的内容区域高29像素(红色像素),下面有1个像素的边框(总高度为30像素,所以在这种情况下CSS高度被解释为’包括边框’).

我的问题是,为什么盒子模型有例外(元素的高度不应该包括边框,但它显然适用于< table>)？这是否记录在W3C规范中？我可以将这种行为放在未来吗？

PS：我用IE 7,IE 8,Opera 10.10,Safari 4.0.4,Chrome 3.0,Firefox 3.5测试了这个页面,所有文件渲染完全相同(在Win7 x64上).

解决方法

在定义单元格的高度时,我看到了类似的问题,并且看起来表格使用的是边框模型,而不是内容框.我强烈怀疑,但目前没有证据支持这一点,这是为了保持与基于表格的布局的兼容性.例如,如果您要设置宽度100％以及边框或边距,那么您将遇到滚动问题(假设您的表占用了整个窗口).

这实际上是边框模型的优势,因为使用内容框很难实现100％-100px,但这里很简单.幸运的是,使用CSS3,我们可以选择使用边框来表示块级元素,它可能应该首先使用.我记得曾经听说IE5已经实现了边框,因为那是在愚蠢的规范中,然后改变了.

仔细阅读关于表格布局的CSS规范可能会确认是否是这种情况.

我刚才看到的问题是,如果我得到一个200px的高度,10px的边框和20px的填充,那么使用getCalculatedStyle(),浏览器告诉我他的高度是140px！尽管我特意将高度设置为200px.

问候,艾伦

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!