关于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时一定要充分考虑代码复用,这样会减少很多工作量。另外请多用各种选择符、组合选择符,这样减少一些类名,使代码更有余地。

你可能感兴趣的:(关于html+css兼容)