在不同页面中显示不同的文本框宽度
我的第一个 HTML 页面中有以下文本框：
<input tabindex="4" type="text" class="search_textbox roundedCorners" id="search_query" name="search_query"/>
.roundedCorners{
border:1px solid black;
padding-left: 5px;
padding-right: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.search_textbox {
position: absolute;
width: 187px;
height: 21px;
left: 96px;
top: 96px;
padding-right: 29px;
padding-left: 48px;
}
当我在浏览器中看到它时，在第一页中 search_textbox 的“最终”宽度是 187+48+29=264px。但是当我在第二页中插入相同的内容并使用相同的浏览器打开它时，search_textbox 的“最终”宽度仅为 187px。
我正在 Chrome 和 Mozilla 中测试它。它们都显示完全相同的图片。
为什么？我做错了什么还是什么？
更新1
我注意到，在第二页中，Chrome 会自动添加以下样式，而在第一页中，它不会添加它：
input:not([type="image"]), textarea { user agent stylesheet
-webkit-box-sizing: border-box;
}
我认为这个属性导致了宽度错误，对吧？但我搜索了所有 .css 文件，但根本找不到该属性。 Chrome 如何将该属性本身添加到一个页面中而不添加到另一个页面中？
更新2
我已经解决了问题。我注意到在第一页中我有 语句，但在第二页中一个不，所以一旦我将该语句添加到第二页中，问题就解决了。但我还是想知道为什么？
I have following textbox in my first HTML page:
<input tabindex="4" type="text" class="search_textbox roundedCorners" id="search_query" name="search_query"/>
.roundedCorners{
border:1px solid black;
padding-left: 5px;
padding-right: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.search_textbox {
position: absolute;
width: 187px;
height: 21px;
left: 96px;
top: 96px;
padding-right: 29px;
padding-left: 48px;
}
When I see it in the browser, in the first page the "final" width of search_textbox is 187+48+29=264px. But when I insert the same thing in the second page and open it with the same browser the "final" width of search_textbox is only 187px.
I am testing it in Chrome and Mozilla. All of them show exactly the same picture.
Why? Am I doing something wrong or what?
UPDATE 1
I have noticed that in the second page Chrome is adding following style automatically, while in the first page it is not adding it:
input:not([type="image"]), textarea { user agent stylesheet
-webkit-box-sizing: border-box;
}
I think this property is causing this error with the width, right? But I have searched in all my .css files and couldn't find that property at all. How Chrome is adding that property itself in one page and not adding in another page?
UPDATE 2
I have solved the problem. I have noticed that in the first page I had <!DOCTYPE html> statement but in the second one no, so once I have added that statement into the second page the problem has been solved. But still I just wonder why?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
鉴于您已经解决了问题，这个答案有点多余，但无论如何:-)
您可能已经知道这一点，但是
textarea的宽度187px是默认为您的浏览器，这很好地引导我们进入下一段。没有文档类型的文档无法获取和解析 CSS 样式的原因是，从技术上讲，它不是有效的文档。添加文档类型后，问题就解决了。
Seeing as you've fixed your problem, this answer is a little superfluous, but whatever :-)
You probably know this already, but the
textareas width of187pxis the default for your browser, which leads us nicely on to my next paragraph.The reason CSS styles aren't fetched and parsed by a document with no doctype is due to the fact that, technically, it's not a valid document. Once you add the doctype, problem solved.