gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:02:56 31 4
gpt4 key购买 nike

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

当我删除 !DOCTYPE 时,两个输入字段都设置为相等的长度,即每个字段相应地设置为 185px。

对于 DOCTYPE,文本框的宽度略大于选择元素。如果我通过带有 offsetWidth 属性的 javascript 检查它的宽度,它被发现是 189px 而不是我在我的 CSS 中设置的 185px。

输出截图:-

enter image description here

代码片段:-

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

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com