首页 \ 问答 \ HTML“按钮”应该和其他所有的盒子模型一样吗？(Should HTML “buttons” have the same box-model as everything else?)

HTML“按钮”应该和其他所有的盒子模型一样吗？(Should HTML “buttons” have the same box-model as everything else?)

 使用button type引用了button元素和input元素，我遇到了一个我认为是bug的行为（在Firefox和Chrome的最新版本中）。 但鉴于表格元素通常是我认为是w3规则的例外，我认为在假设我是对的之前我会要求验证。  
 行为是这样的：在标准模式中，当我向这样的元素添加边框时，边框出现在元素的宽度内。 如果我手动将box-sizing设置为content-box （使用供应商前缀），则行为符合我的预期，但是当将box-sizing保留为默认值时， 它不是content-box 。 这是一个jsfiddle例子 。 如果你不想去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>
 
 这是正确的行为，还是我偶然发现了一个错误？ 

Referring to both the button element and the input element with a type of button, I ran across a behavior I think is a bug (in recent releases of both Firefox and Chrome). But given how form elements are often exceptions to what I think are w3 rules, I thought I would ask for verification before assuming I am right. 
The behavior is this: In standards-mode when I add a border to such an element, the border appears inside the width of the element. If I manually set the box-sizing to content-box (using vendor prefixes), the behavior does what I expect, but when the box-sizing is left as its default it is not content-box. Here's a jsfiddle example. If you don't want to go to jsfiddle, here's the source code: 
<!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>
 
Is this correct behavior, or have I stumbled on a bug?

原文：https://stackoverflow.com/questions/8334766

更新时间：2023-06-08 07:06

最满意答案

 哇，所以我是个白痴。 Appengine将Text存储为对象，这就是无法在Cloud Console中查看的原因。 如果我试图实际下载主题，我会看到有一个与我上传的内容相匹配的项目的值。  
 浪费多个小时的方式:( 

Wow, so I'm an idiot. Appengine stores Text as an object and that's why it can't be viewed in Cloud Console. If I had tried to actually download the theme I would have seen there was a value for items that matched what I uploaded. 
Way to waste multiple hours :(

HTML“按钮”应该和其他所有的盒子模型一样吗？(Should HTML “buttons” have the same box-model as everything else?)

最满意答案

相关问答

如何将我的Google App Engine数据存储区中的数据写入com.google.appengine.api.datastore.Text(How do I write data in my Google App Engine Datastore to com.google.appengine.api.datastore.Text)[2022-03-30]

如何在数据库中存储“com.google.appengine.api.datastore.Text”(How to store “com.google.appengine.api.datastore.Text” in database)[2023-07-15]

Appengine上的FileBackedOutputStream(FileBackedOutputStream on Appengine)[2023-11-08]

在Google App-Engine JAVA中将文本转换为字符串，反之亦然(Converting Text to String and vise-versa in Google App-Engine JAVA)[2022-02-02]

Google模板文件中的appengine字符串替换(Google appengine string replacement in template file)[2022-06-24]

text django / google appengine上的差异(text diff on django/google appengine)[2024-02-07]

Google AppEngine字符串到文本(Google AppEngine String to Text)[2022-07-11]

Google是否将AppEngine用于自己的产品？(Does Google uses AppEngine for its own products?)[2022-04-22]

Google Appengine将字符串转换为文本(Google Appengine convert string to text)[2023-06-16]

如何使用com.google.appengine.api.datastore.Text(how to use com.google.appengine.api.datastore.Text)[2022-07-01]

相关文章

最新问答