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

前端之家收集整理的这篇文章主要介绍了html – 所有现代浏览器中的意外箱模型行为前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
以下是一个参考 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.

问候,艾伦

原文链接:https://www.f2er.com/html/225654.html

猜你在找的HTML相关文章