我必须为文本框和选择元素设置相等的宽度。
当我删除 !DOCTYPE 时，两个输入字段都设置为相等的长度，即每个字段相应地设置为 185px。
对于 DOCTYPE，文本框的宽度略大于选择元素。如果我通过带有 offsetWidth 属性的 javascript 检查它的宽度，它被发现是 189px 而不是我在我的 CSS 中设置的 185px。
输出截图:-
代码片段:-
<!DOCTYPE html>
<html>
<style>
.usrInput{width:185px}
</style>
<body>
<div id="content">
<form>
<input type="text" name="fname" id="fname" class="usrInput"/><br/>
<select name="state" id="state" class="usrInput">
<option value="">Select State
</select><br/>
</form>
</div>
</body>
</html>
我认为是用户代理样式表 以某种方式覆盖了我自己的 CSS。我实际上不知道为什么会这样，我应该怎么做来克服这个问题？
最佳答案
如果你使用
.usrInput {
box-sizing: border-box;
}
下拉菜单和输入大小将匹配。
编辑:通常您可以使用诸如 normalize.css 之类的 css 重置来自动处理此类小问题。
关于html - 如何防止用户代理样式表覆盖我自己的 CSS？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51672932/