Question

您好我刚刚学习了HTML和CSS，最近我一直在玩，并且做了很多练习。练习编码搜索栏时我注意到了一些东西。我注意到当我编码输入按钮的高度和输入搜索的高度完全相同时，搜索栏总是更高。这是为什么？如果搜索栏和按钮的高度为30像素，那么您会认为它们在浏览器中的高度相同。这是我正在做的一个示例代码。谢谢大家的帮助。

<!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>

Answer 1

嗯，这是因为每个浏览器都有自己的＆＃34;用户代理样式表＆＃34;。它会对您的页面元素应用一些规则来正确显示它们＃34;正确＆＃34;。这就是为什么按钮具有不同外观的原因，具体取决于浏览器。你只需要覆盖这些规则。

更新：在Chrome上，检查浏览器是否为您的元素应用了一些预定义样式，右键单击它，检查元素，然后在右侧，查找＆＃34;用户代理样式表＆＃34;内部＆＃34;样式＆＃34;标签

Answer 2

它的原因表单元素是相对于操作系统和预定义的浏览器样式设置。如果你设置type="button" ...它真的变成了一个伪<button>，其中所有默认样式都继承自button元素。

CSS3 最终通过使用

获得了我们的青睐

box-sizing: border-box;

<强> jsBin demo

_{使用CSS2不是不可能，但有一些技巧和黑客}

Answer 3

在您的情况下，输入框的实际尺寸为134 * 36，按钮的实际尺寸为60 * 30（宽*高）。

因为输入类型＆＃34; text＆＃34;和＆＃34;按钮＆＃34;是预定义的，他们的风格中包含填充。

因此，如果您想知道实际的高度和宽度，请右键单击chrome中的元素并选择＆＃34;检查元素＆＃34;在菜单中。

现在，您可以在底部的窗口中查看源代码。将鼠标悬停在窗口中元素的源上，您将看到元素的实际高度和宽度。

所以调整你的宽度和高度：）

祝你好运

Answer 4

所有浏览器都有默认样式，因此每个浏览器都会显示每种方式。只需覆盖浏览器的默认浏览器样式，字体大小也会影响输入按钮的高度和宽度。并且它不是修复元素高度的正确做法，而是更好地给予填充。然而，过多的填充也不是一种正确的做法。

有关css和<input />的问题

4 个答案: