关于html+css兼容

           宽度和高度自适应是任何页面无法回避的问题，有的界面只需要固定宽高，这样当然大大的降低设计实现的难度，但很多项目多会用到自适应。一个对象的高度宽度是否可以自适应（也就是按百分比显示）取决于父级对象。（1）高度自适应：在默认状态下，浏览器没有对body体一个高度属性，所在在body的字元素按百分比定义高度是无效的。一般我们都要对html与body设置{height:100%;},这样能使火狐和ie均能实现高度自适应，在ie中，html对象默认100%的高度，body不是。火狐中html不是100%。其中Body 对象代表文档的主体 (HTML body document.body　)，html对象偏重于一些标（document.documentElement）。  （2）宽度自适应：很多平台页面我们需要考虑宽度自适应，假如body体内有俩个div，左侧的固定宽度，右侧自适应，则左侧的div需要设置向左浮动（float:left;）,右侧的div需要设置margin-left为左侧div的宽度，即可实现。若 body体内三个div，中间自适应，左侧右侧固定，则左右侧div分别设置float:left与float:right,中间div设置margin-left，margin-right分别为左右侧宽度。

（2）绝对定位下的oveflow的bug（IE7），在ie7下，若一个div的子元素有绝对定位的样式，在overflow:auto时会出现溢出的情况，此时我们需要再此div父级元素上设置相对定位属性即可解决。

（3）关于padding与margin，众所周知这是设定内边距与外边距的属性，若每个div的宽高都设有具体值时，用起来这俩个属性会按预期达到你的效果，但如果宽高为固定是按里面元素的宽高变化的话会出些问题。记住，div的宽高会包括他的padding值（子元素的宽高加padding加border），但不包括margin值。对于一些位置的定位，用padding可能会更好。

（4）在间距的处理上不用老想着padding与margin，如在一些关于文字的处理上要充分考虑使用letterspacing，text-indent，line-height的使用，这些属性会很容易实现。类似的还有vertical-align属性

（5）table的好处。诚然，table布局可读性较低维护成本高，任何table布局都可以用div代替，但是在碰到类似很多字段表单展示时，table布局的优势一览无余，便于整体控制样式。

（6）在宽高的调试中如果适应不了各个版本的浏览器，考虑hack方法。IE6能识别-，IE7能识别+，IE8和FF都不能识别+和-IE8/FF都不识别*，IE7优先识别!important，IE6不能识别!important，/9适应所有ie。

（7）其他。在写样式css时一定要充分考虑代码复用，这样会减少很多工作量。另外请多用各种选择符、组合选择符，这样减少一些类名，使代码更有余地。

转载于:https://my.oschina.net/u/1470765/blog/213353