Question

我的第一个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的第二页中，Chrome会自动添加以下样式，而在第一页中则不会添加它：

input:not([type="image"]), textarea {                    user agent stylesheet
  -webkit-box-sizing: border-box;
}

我认为这个属性导致了这个错误的宽度，对吗？但我搜索了所有的.css文件，根本找不到该属性。 Chrome如何在一个页面中添加该属性本身而不添加另一个页面？

更新2

我已经解决了这个问题。我注意到在第一页中我有<!DOCTYPE html>语句，但在第二页中没有，所以一旦我将该语句添加到第二页问题已经解决了。但我还是想知道为什么？

Answer 1

看到你已经解决了问题，这个答案有点多余，但无论如何： - ）

您可能已经知道这一点，但textarea的{{1}}宽度是您浏览器的默认值，这可以很好地引导我的下一段。

CSS样式未被没有doctype的文档提取和解析的原因是，从技术上讲，它不是有效的文档。添加doctype后，问题就解决了。

在不同页面中显示不同的文本框宽度

1 个答案: