个人中心
gpt4 book ai didi

html - 为什么文档类型对大小的影响如此之大？

转载 作者：技术小花猫 更新时间：2023-10-29 11:50:48 26 4
gpt4 key购买 nike

下面的代码从没有文档类型的图像部分绘制漂亮的椭圆形按钮。原始图像为 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>

但是如果我添加声明

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

到文档的开头，按钮变得更高，好像中间有什么东西。

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

最佳答案

Why is it so?

了解 为什么 事情会以 CSS 中的方式发生并不是大多数网页设计师或网页作者担心的事情。通常，原因涉及 CSS 规范各个部分的交互。这也是为什么浏览器制造商花了这么长时间才使其中的一些正确，因此，为什么当您不使用 DOCTYPE 并因此获得怪癖模式时，您获得的布局行为有时看起来比使用 DOCTYPE 时更直观获取标准模式，严格遵守 CSS 规则。

作者通常知道发生了什么事，以及发生时该怎么做就足够了。更多内容在此答案的底部。

但是，通过一些搜索可以在 CSS 2.1 规范中找到原因。

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

9.2.1 Block-level elements and block boxes

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.

...

9.2.2 Inline-level elements and inline boxes

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.) ....

Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.

然后，我们还需要了解line box的概念:

9.4.2 Inline formatting contexts

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. ... The rectangular area that contains the boxes that form a line is called a line box.

... The height of a line box is determined by the rules given in the section on line height calculations.

...

Line boxes are created as needed to hold inline-level content within an inline formatting context. ...

所以<img>是一个被替换的内联元素，它建立了一个行内级框，它建立了一个行框，它被布局在一个像<div>这样的 block 容器对象中。 , 或 <td> .然后，行框高度由那些行高计算确定:

10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

As described in the section on inline formatting contexts, user agents flow inline-level boxes into a vertical stack of line boxes. The height of a line box is determined as follows:

  1. The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'. (See "Calculating heights and margins" and the height of inline boxes in "Leading and half-leading".)
  2. The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline (i.e., the position of the strut, see below).
  3. The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under 'line-height' below.)

通过这些步骤，<img height="1">本身，只会导致行高为一个像素高，从而留下 strut。这在前导和半前导部分中有描述:

10.8.1 Leading and half-leading

...

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut." ...

The height and depth of the font above and below the baseline are assumed to be metrics that are contained in the font. ...

所以我们有它。行框，由 <img> 创建元素，在开始处有一个假想的行内框，其高度由字体大小决定，这导致行框足够高以包含该字体的字符。

Is it possible to avoid such behavior?

从上面的解释来看，有两种选择:

  1. 行框是从内联<img>创建的元素。所以如果把元素改成 block 级元素，就没有line box了，也没问题。

    即在 CSS 中 td img { display:block; }

  2. 由于高度是由依赖于字体大小的支柱引起的，因此在该处将字体大小更改为 0 也解决了问题。

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

    (您可能希望在第三个 <tr> 上放置一个类并使用它代替 :nth-of-type(3) 以与不支持 CSS 3 的浏览器兼容)

What is better: find a way to make this working on HTML 4.01 or change doctype to more modern one?

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

关于html - 为什么文档类型对大小的影响如此之大？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8634498/

26 4 0
文章推荐： html - HTML5 中的行内元素是否允许 block 级元素？
文章推荐： jquery - 将表格单元格放在单击上 - jquery
文章推荐： javascript - 向 div 添加 onclick 事件
文章推荐： CSS3 : how to get a 5px wide thick horizontal line
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com