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

我已经按照我的第一个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

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

来源

2011-09-11 Bakhtiyor

这两个页面加载相同的CSS？我只是想知道如果你的网页之一加载额外的CSS，已经覆盖了你的一种风格。 – David

你能向我们展示一个这样的例子吗？否则，我们没有任何东西可以重现这一结果。 – ClarkeyBoy

我已为其他信息添加更新部分。 Thnx – Bakhtiyor

看到，因为你能解决问题，这个答案是有点多余，但无论:-)

你可能已经知道了，但textarea S的187px宽度为您的浏览器，默认其很好地引导我们到我的下一段。

原因CSS样式不是由没有文档类型的文档获取和解析的，原因在于，从技术上讲，它不是一个有效的文档。一旦你添加了doctype，问题就解决了。

来源

2011-09-11 11:41:26 Bojangles

我看，谢谢，现在我正在阅读http://stackoverflow.com/questions/414891/whats-up-doctype以了解更多。 – Bakhtiyor

一个很好的线程来阅读。我希望它能回答你所有的问题。 – Bojangles

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

回答

相关问题