为什么doctype如此影响大小？

Question

为什么doctype如此影响大小？

以下代码从没有doctype的图像部分绘制漂亮的椭圆形按钮.原始图像为143x45并正确切片.

<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">


<div style="position:absolute; left:200px; top:200px">
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td style="width:19px; height:3px; background-image:url('images/button_01.png')"></td>
            <td style="height:3px; background-image:url('images/button_02.png')"></td>
            <td style="width:20px; height:3px; background-image:url('images/button_03.png')"></td>
        </tr>
        <tr>
            <td style="width:19px; height:19px; background-image:url('images/button_04.png')"></td>
            <td style="background-color:rgb(183,174,130)" rowspan="3">

                Some text

            </td>
            <td style="width:20px; height:19px; background-image:url('images/button_06.png')"></td>
        </tr>
        <tr>
            <td style="width:19px; background-image:url('images/button_07.png')"><img src="images/button_07.png" width="19" height="1" alt=""></td>
            <td style="width:20px; background-image:url('images/button_08.png')"><img src="images/button_08.png" width="20" height="1" alt=""></td>
        </tr>
        <tr>
            <td style="width:19px; height:19px; background-image:url('images/button_09.png')"></td>
            <td style="width:20px; height:19px; background-image:url('images/button_10.png')"></td>
        </tr>
        <tr>
            <td style="width:19px; height:3px; background-image:url('images/button_11.png')"></td>
            <td style="height:3px; background-image:url('images/button_12.png')"></td>
            <td style="width:20px; height:3px; background-image:url('images/button_13.png')"></td>
        </tr>
    </table>
</div>

</body>

Run Code Online (Sandbox Code Playgroud)

但如果我加上声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Run Code Online (Sandbox Code Playgroud)

在文档的开头,按钮变得更高,好像中心部分存在某些东西.

为什么会这样？有可能避免这种行为吗？什么是更好的:找到一种方法使这个工作在HTML 4.01上或将doctype更改为更现代的？

Answer 1

Alo*_*hci 7

为什么会这样？

理解为什么事情发生在CSS中的方式并不是大多数网页设计师或网络作者所担心的.通常,原因涉及CSS规范的各个部分的交互.这也是为什么浏览器制造商花了这么长时间来解决这个问题的原因,也就是为什么当你不使用DOCTYPE并因此获得怪癖模式时,你得到的布局行为有时看起来比你使用DOCTYPE时更直观获得标准模式,严格遵循CSS规则.

它通常是足够的作者知道这事情发生,当它发生的事.更多的是在这个答案的底部.

但是,原因可以在CSS 2.1规范中找到并进行一些搜索.

首先,我们需要了解一些定义:

9.2.1块级元素和块框

块级元素是源文档中可视化为块(例如段落)的元素.'display'属性的以下值构成一个元素块级:'block','list-item'和'table'.

...

9.2.2内联级元素和内联框

内联级元素是源文档中不构成新内容块的元素; 内容按行分布(例如,段落中强调的文本片段,内嵌图像等)....

不是内联框的内联级框(例如替换的内联级元素,内联块元素和内联表元素)称为原子内联级框,因为它们作为单个不透明框参与其内联格式化上下文.

然后,我们还需要了解的概念线框内:

9.4.2内联格式化上下文

在内联格式化上下文中,框从一个包含块的顶部开始一个接一个地水平排列.这些框之间会考虑水平边距,边框和填充....包含形成一条线的框的矩形区域称为线框.

...线框的高度由线高计算部分中给出的规则确定.

...

根据需要创建线框,以在内联格式化上下文中保存内联级内容....

所以a <img>是一个替换的内联元素,它建立一个内联级别的框,它建立一个行框,它放在一个块容器对象中,如a <div>或a <td>.然后,线框高度由行高计算确定:

10.8线高计算:'line-height'和'vertical-align'属性

如关于内联格式化上下文的部分所述,用户代理将内联级别框插入到垂直堆栈的行框中.线框的高度确定如下:

计算行框中每个内联级别框的高度.对于替换元素,内联块元素和内联表元素,这是其边距框的高度; 对于内联盒子,这是他们的"线高".(请参阅"计算高度和边距"以及"前导和半前导"中的内联框的高度.)

内联级框根据其"垂直对齐"属性垂直对齐.如果它们对齐"顶部"或"底部",则必须对齐它们以便最小化线盒高度.如果这样的盒子足够高,则有多种解决方案,CSS 2.1没有定义线盒基线的位置(即支柱的位置,见下文).

线盒高度是最上面的盒子顶部和最下面的盒子底部之间的距离.(这包括支柱,如下面'line-height'所述.)

完成这些步骤<img height="1">本身只会使行高高一个像素,从而离开支柱.有关领先和半领先的部分对此进行了描述:

10.8.1领先和半领先

...

在内容由内联级元素组成的块容器元素上,"line-height"指定元素中线框的最小高度.最小高度包括基线上方的最小高度和其下方的最小深度,就像每个线框以零宽度内联框开头一样,其中包含元素的字体和线高属性.我们称这个想象的盒子为"支柱"....

假定基线上方和下方的字体的高度和深度是字体中包含的度量....

因此,我们有它.由<img>元素创建的线框在开头有一个虚构的内联框,其高度由字体大小决定,这使得线框足够高以包含该字体的字符.

有可能避免这种行为吗？

从上面的解释,有两个选项:

行框由内联<img>元素创建.因此,如果元素被更改为块级元素,则没有行框,也没有问题.

即在CSS中 td img { display:block; }
由于高度由这是依赖于字体的大小,在该地方改变字体大小设置为0支柱引起也解决了这个问题.

即在CSS中 tr:nth-of-type(3) td { font-size:0px }

(您可能希望在第三个类上添加一个类<tr>而不是:nth-of-type(3)与非CSS 3支持的浏览器兼容)

什么是更好的:找到一种方法使这个工作在HTML 4.01上或将doctype更改为更现代的？

最现代的是<!DOCTYPE html>.您的页面将与其一样完全相同<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">,因为它们都会导致浏览器中的标准模式.

归档时间：	13 年，11 月前
查看次数：	1479 次
最近记录：	8 年，10 月前