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

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

html css browser

Html 如何防止用户代理样式表覆盖我自己的CSS？,html,css,browser,doctype,Html,Css,Browser,Doctype,我必须为文本框和选择元素设置相等的宽度当我卸下时！DOCTYPE两个输入字段的长度都设置为相等，即每个字段相应地为185px 使用DOCTYPE时，文本框的宽度略大于select元素。如果我用javascript用offsetWidth属性检查它的宽度，就会发现它是189px，而不是我在CSS中设置的185px 输出的屏幕截图：- 代码片段：- <!DOCTYPE html> <html> <style> .usrInput{width:185px} &

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

当我卸下时！DOCTYPE两个输入字段的长度都设置为相等，即每个字段相应地为185px

使用DOCTYPE时，文本框的宽度略大于select元素。如果我用javascript用offsetWidth属性检查它的宽度，就会发现它是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>


.usrInput{宽度：185px}


选择状态

我认为是用户代理样式表以某种方式覆盖了我自己的CSS。我不知道为什么会发生这种情况，我应该怎么做才能克服这个问题？

如果你使用

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

下拉列表和输入大小将匹配

编辑：通常您可以使用诸如normalize.css之类的css重置来自动处理这样的小问题。

您是否尝试过设置

框大小：边框框

？@Sirko我没有尝试过。（仅供参考：在这种情况下，你不必“猜测”，不管是UA样式表还是非UA样式表——浏览器开发工具可以帮助你很快找到答案。）@CBroe感谢Tona，在这个世界上有一些愚蠢的人，比如说，他们甚至没有勇气提供任何提示就否决了这个问题。