gpt4 book ai didi

internet-explorer - ie8 标准兼容模式下的 css box-sizing

转载 作者:太空宇宙 更新时间:2023-11-03 22:00:35 27 4
gpt4 key购买 nike

我知道 Internet Explorer 传统上通过在总框宽度中包含填充和边框宽度来实现 css 框大小“错误”。当页面以符合标准的模式呈现时,IE8+ 会“修复”此框大小并使用 -ms-box-sizing 属性实现 CSS3 框大小调整。

但这里有一些有趣的事情。以下代码呈现了一些具有各种宽度 + 填充 + 边框 + 框大小组合的 div:

<html>
<head>
<style type="text/css">
div { margin-bottom: 1em; background-color: #5555e9; }

#test1 { width: 500px; }
#test2 { width: 500px; padding: 10px; }
#test3 { width: 500px; padding: 10px; border: 5px solid red; }
#test4 { width: 500px; padding: 10px; border: 5px solid red;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="test1">Hello World!</div>
<div id="test2">Hello World!</div>
<div id="test3">Hello World!</div>
<div id="test4">Hello World!</div>
</body>

在 IE8 怪癖模式下,所有 div 输出都具有相同的 500px 宽度,正如预期的那样,考虑到 IE 对框大小的怪异计算:

html code rendered in IE8 quirks mode

但是如果我添加以下文档类型声明以在 IE8 标准兼容模式下呈现:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

输出变成这样:

enter image description here

请注意,最后一个框与第三个框的尺寸相同,即使使用 css 将 box-sizing 属性设置为 border-box。我真的希望 IE8 在标准兼容模式下使用 border-box 方法,但鉴于此测试,我不知道如何实现它。有人有什么建议吗?

最佳答案

感谢 Knyri 的回答:

问题是我的 IE8 浏览器实例默认以 IE 7 标准模式呈现,而不是 8。(IE7 不支持 CSS3 框大小调整。)我能够通过强制页面以 IE 8 标准呈现来解决这个问题合规模式。我将以下内容添加到我的 html head 标记中:

        <meta http-equiv="x-ua-compatible" content="IE=8"/>

除了title和其他meta标签外,它必须在html head标签中的其他标签之前。这导致以下呈现:

enter image description here

如您所见,前三个框使用 content-box box-sizing(W3C 标准)呈现,第四个框使用 border-box 呈现,因为它是使用 CSS 显式设置的。

关于internet-explorer - ie8 标准兼容模式下的 css box-sizing,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10837360/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com