gpt4 book ai didi

css - 为什么我的 CSS 内容框在 Firefox 和 Internet Explorer 中大小不同?

转载 作者:太空宇宙 更新时间:2023-11-04 15:58:59 25 4
gpt4 key购买 nike

编辑/解决 找到我自己的答案。对于所有想知道的人,它是:

DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}

我有以下 CSS 代码,我认为它非常“正常”,因此所有浏览器都应该平等地解释它。问题在于,在 Firefox 中,该框比在 Internet Explorer 中宽约 20 像素。是什么原因?我怎样才能使它们同样宽?

这是CSS代码:

<style type="text/css">
.commentbox{
background-color: #ffffff;
width: 200px;

border-top-color: #D1D1D1;
border-top-style: solid;
border-top-width: 1px;

border-bottom-color: #D1D1D1;
border-bottom-style: solid;
border-bottom-width: 1px;

border-left-color: #D1D1D1;
border-left-style: solid;
border-left-width: 1px;

border-right-color: #D1D1D1;
border-right-style: solid;
border-right-width: 1px;


box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.09);
padding-bottom: 9px;
padding-left: 9px;
padding-right: 9px;
padding-top: 9px;

position:relative;
display:block;
}

.title{
padding-top: 5px;
padding-bottom: 5px;
font-family: Verdana;
font-size: 12px;
}

.count{
text-align:right;
}
</style>

HTML 代码:

<body bgcolor="#f3f3f3">
<div class="commentbox">
<div class="title">some long long long text that might take up two lines</div>
<div class="count">123</div>
</div>

这是一个jsfiddle example

最佳答案

您的 Doctype 或缺少 Doctype 导致浏览器以 Quirks 模式呈现您的页面。在这种模式下,他们倾向于模拟旧浏览器的错误,而不是遵循标准。 Quirks 模式下浏览器之间存在许多不一致。

Internet Explorer 中的一个错误是它将 padding 放在元素的 width 内。 (new, draft, experimental) box-sizing 属性允许浏览器有意这样做。

您应该使用触发标准模式的 Doctype 以避免与标准代码不一致。

HTML 4.01 Strict 通常是现代文档的最佳选择。

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

您还可以考虑 HTML 5 草案:

<!DOCTYPE HTML>

关于css - 为什么我的 CSS 内容框在 Firefox 和 Internet Explorer 中大小不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10072273/

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