代码之家 › 专栏 › 技术社区 › Matt Greer

在标准模式下,孩子会影响父母的身高吗?

standards-compliance css html

Matt Greer · 技术社区 · 15 年前

以这个页面为例,是否可以在mydiv中插入一个子元素,使mydiv的高度超过500px?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
    <div id="mydiv" style="width:500px;height:500px;border:4px solid red">
        <!-- place content here -->
    </div>
</body>
</html>

我什么都找不到。例如,下面的情况我告诉InnerDiv高度为100%。它会发现它的父母是500px高,因此也就是500px高。最终结果是,内容高度为800px,内容溢出到mydiv之外,而mydiv仍然是一个坚固的500px高:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
    <div id="mydiv" style="width:500px;height:500px;border:4px solid red">
        <img src="myimage.jpg" width="400" height="300" />
        <div style="width:100%;height:100%;background:yellow">
            hi
        </div>
    </div>
</body>
</html>

ie在怪癖模式下运行会导致mydiv在许多情况下成长为适应其孩子的环境。标准模式似乎不会明显增长。总是这样吗?

我主要在Windows上的IE8和FF3.5中对此进行测试,IE8在所有可能的模式下运行。

1 回复 | 直到 15 年前

mercator 15 年前

否:在标准模式下,默认 overflow 容器的属性应设置为 visible 这意味着溢出的内容将呈现在容器的剪切区域之外。没有这样的 溢流 选择增大容器的大小以匹配其子容器。您可以看到更多关于溢出的信息 here

但是,有一些方法可以使容器的大小与其子容器的大小相匹配。在标准模式下,正确的方法是设置css属性 min-height 而不是财产 height .

自从 高度强制 行为不会发生在IE6中,人们通常最终会同时设置 最小高度 对于符合标准的浏览器,然后设置 高度 仅适用于IE conditional comments 或者在属性名前面加下划线 _ 所以IE6会使用它,但其他浏览器会忽略它。

所以你的分区应该是

<div id="mydiv" style="width:500px;min-height:500px;_height:500px;border:4px solid red">

您可以在上找到更多信息 最小高度 here 和一个快速的谷歌/必应搜索 min-height IE6 会给你所有你需要的答案。

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前