Question

我必须为文本框和选择元素设置相等的宽度。

当我删除！DOCTYPE 时，两个输入字段都设置为相等的长度，即每个长度分别为185px。

对于DOCTYPE，文本框的宽度略大于select元素。如果我使用具有 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。我实际上不知道为什么会发生这种情况以及应该怎么做以解决此问题？

Answer 1

如果您使用

.usrInput {
    box-sizing: border-box;
}

下拉菜单和输入大小会匹配。

编辑：通常，您可以使用CSS重置（例如normalize.css）来自动处理类似这样的小怪癖。

如何防止用户代理样式表覆盖我自己的CSS？

1 个答案: