标签：
浏览器对盒模型的解析不一致。
尽量写兼容代码，对于IE6/7可以使用CSS Hack
在代码开头加入这行代码，作用是让IE8以下对盒模型的解析，没有加上 doctype 声明，在 ie 浏览器中显示“ie盒子模型”，在 ff 浏览器中显示“标准 w3c 盒子模型”。
<!doctype html>
依靠DOCTYPE来改变标准或怪异模式，类似这些低版本的浏览器下的标准模式，接近与“先进”浏览器下的几乎标准模式，因为它们都没有严格遵循CSS2规范。并且他们同样在标准模式下，各自的渲染还是是有差别的。没差别就不会有css hack的诞生。
设置IE渲染方式默认为最高
下面这段代码来让IE的文档模式永远都是最新的：
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。
.box{
width:300px;
padding:30px;
border:20px solid;
margin:30px;
background:#ccc;
}
目前浏览器大部分元素都是基于W3C标准的Box Model上，但对于form中的有部分元素还是基于传统的Box Model上，比如说input中的submit,reset,button和select等元素，这样如果我们给其设置border和padding他 也只会往内延伸，这也是我们介绍盒模型的重要原因--解决form表单中各元素的兼容问题的基础。
box-sizing的两个值如下：
content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 。此属性表现为标准模式下的盒模型。
border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 。此属性表现为怪异模式下的盒模型。
1、【type="submit"】、【type="reset"】、button、【type="text"】、select、textarea默认情况下都带有2px的border;
2、【type="submit"】、【type="reset"】、button默认情况下会有6px的左右padding；height在mac系统下会比在winxp win7系统下少1px,只有16px,（12px的字体时高度为17px）;
3、【type="text"】默认情况下会有1px的上下padding；WinXP和Win7下高度为15px，Mac系统下为14px
4、【type="checkbox"】默认情况下会有margin：3px 3px 3px 4px,并且宽/高度默认为13px(IE6，IE7默认大约是15px，Mac系统下只有9px)
5、【type="radio"】默认情况下会有margin: 3px 3px 0 5px的外边，并且宽/高度默认为13px（IE6,IE7默认大约是15px,Mac系统下只有9px）
6、textarea默认情况带有1px的上下margin；
最后要说的一点是，上面那些常用的form元素只有【type="text"】和textarea两者是遵循W3C的标准Box Model，而其他几个都是还是遵循IE传统下的Box Model。
.submit, .reset, .button, .text, .select, .textarea, .checkbox, .radio {
margin: 0;
padding: 0;
border-width: 1px;
height: 17px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.checkbox, .radio {
width: 13px;
height: 13px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
margin是用来隔开元素与元素的间距；
padding是用来隔开元素与内容的间隔。
margin用于布局分开元素使元素与元素互不相干；
padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。
::-moz-placeholder{
color: rgba(205,205,205,1);
text-indent: 2px;
opacity: 1!important;
font-size: 14px;
}
:-ms-input-placeholder{
color: rgba(205,205,205,1);
text-indent: 2px;
font-size: 14px;
}
::-webkit-input-placeholder{
color: rgba(205,205,205,1);
text-indent: 2px;
font-size: 14px;
}
.InputText:focus {
outline: -webkit-focus-ring-color auto 5px;
border: 1px solid rgba(77, 144, 203, 1);
}
1.ie元素浮动时边界误差问题
在ie6浏览器预览浮动元素时，浮动的边界实际显示为指定边界的2倍，对于ie6边界的显示错误，我们可以设置浮动元素的display属性为inline,这样就可以避免边界加倍显示的问题。
2.非ie浏览器中怎么让父级元素适应子元素高度
在非ie浏览器中，怎么让父级元素的高度随子元素的高度自适应变化呢？
首先我们需要定义父级元素的overflow属性，并且显示声明父级元素自适应调整陶都。 我们来看看目前哪些浏览器能解析自适应高度，非ie浏览器如opera,ntescape,firefox这些都不能够解析，而ie7取消了元素高度自适应；所以，我们为了实现自适应高度，应该增加overflow:auto的声明，但为了与ie不同版本解析兼容，我们还必须增加一个辅助元素，定义clear:both属性，这样就强制了元素的高度。
3元素低边界不被解析
在css规定中，没有定义float属性的父元素不会自动计算高度，要让其计算出高度，就必须在子元素的最后添加一个辅助元素，并且设置clear:both。所以，我们不能设置父元素overflow:auto属性，而是要设置成父元素浮动属性float:left或者float:right.
4子元素在ie溢出
对于这个问题，子元素在ie中溢出，我们可以使用cssheck技巧，我们可以通过定义一个单独在ie浏览器中被解析的样式，如1px,解析父元素的继承性。
标签：
原文地址：http://www.cnblogs.com/ricesm/p/5051105.html
