gpt4 book ai didi

w3c - HTML "buttons"是否应该与其他所有内容具有相同的盒子模型?

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

引用 button 元素和 typebuttoninput 元素,我遇到了我认为这是一个错误的行为(在 Firefox 和 Chrome 的最新版本中)。但考虑到表单元素通常是我认为的 w3 规则的异常(exception)情况,我想在假设我是对的之前我会要求验证。

行为是这样的:在标准模式下,当我向这样的元素添加边框时,边框出现在元素的宽度内。如果我手动将 box-sizing 设置为 content-box(使用供应商前缀),该行为符合我的预期,但是当 box-sizing 保留为默认值 它不是 content-boxHere's a jsfiddle example .如果你不想去 jsfiddle,这里是源代码:

<!doctype html>
<html>
<head>
<title>Broken box model?</title>
<style>
body {
padding: 30px;
background: brown;
}
div {
position: relative;
}
input {
background-color: #CCC;
font-family: Helvetica, Verdana, sans-serif; /* Yes, I know Helvetica and Verdana are dissimilar. I don't care. Arial sucks. */
font-size: 18px;
font-weight: bold;
color: white;
text-transform: uppercase;
border: 0;
width: 150px;
height: 90px;
margin: 4px;
}
input:hover {
margin: 0;
border: 4px solid white;
}
input:active {
margin: 0;
border: 4px solid white;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
</style>
</head>
<body>
<div>
<input type="button" value="I am a button" />
</div>
</body>
</html>

这是正确的行为,还是我偶然发现了错误?

最佳答案

显然这个错误已经报告给 Chrome 和 Firefox。漏洞在于,在这两种情况下,这些元素都在其浏览器样式表中设置了 initial box-sizing: padding-box 值。所以它在技术上不是默认值(初始!=默认值)。然而,将这些元素恢复为 box-sizing: content-box 的唯一方法是为 content-box 使用专有的浏览器扩展,因此没有任何真正的 CSS 兼容方法来做到这一点。 CSS 2.1 不存在 box-sizing,专有浏览器扩展对 CSS 3 无效。

关于w3c - HTML "buttons"是否应该与其他所有内容具有相同的盒子模型?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8334766/

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