您好，我刚刚学习了 HTML 和 CSS，最近我一直在玩弄并进行了大量练习。在练习编码搜索栏时，我注意到了一些事情。我注意到当我将输入按钮的高度和输入搜索的高度编码为完全相同时，搜索栏最终总是更高。这是为什么？如果搜索栏和按钮的高度为 30px，那么您会认为它们在浏览器中的高度相同。这是我正在做的示例代码。谢谢大家的帮助。
<!doctype html>
<html>
<head>
<style>
body {background-color:#555;
}
.search_bar {height:30px;
width:130px;
}
.button {height:30px;
width:60px;
background-color:#777;
border:1px solid #444;
border-radius:4px;
color:#fff;
font-family:arial;
}
.button:hover {background-color:#0099ff;
}
</style>
</head>
<body>
<form>
<input class="search_bar" type="text" /><input class="button" type="button" value="Search"/>
</form>
</body>
</html>
最佳答案
这是因为表单元素与操作系统和预定义的浏览器样式设置有关。如果你设置 type="button" ...真的变成了伪<button>所有默认样式都继承自 button元素。
CSS3 最终通过使用
得到了我们的青睐box-sizing: border-box;
这并不是 CSS2 不可能实现的，但有一些技巧和技巧
关于css - 关于 css 和 <input> 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25092371/