IE曾经使用更方便但非标准的 “边框” 框模型。在此模型中,元素的宽度包括填充和边框。例如:
#foo { width: 10em; padding: 2em; border: 1em; }
会很10em
宽。相反,所有违反标准的浏览器都默认使用 “内容框” 框模型。在此模型中,元素的宽度 不 包括填充或边框。例如:
#foo { width: 10em; padding: 2em; border: 1em; }
实际上将是16em
宽的:10em
+2em
每边填充,+1em
每边边框。
如果您使用具有有效标记,良好doctype和适当标题.aspx#SetMode)的IE的现代版本,它将遵循该标准。否则,您可以通过以下方式强制符合现代标准的浏览器使用“边框”:
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
Opera需要第一个声明,Firefox需要第二个声明,Webkit和Chrome需要第三个声明。
请注意,Webkit(Safari和Chrome)不padding-box
通过任何声明支持盒子模型。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)