CSS浏览器兼容问题(精品)

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,CSS技巧,和浏览器兼容问题,CSS技巧,vertical-align:middle;,line-height:200px;/将行距增加到和整个DIV一样高,然后插入文字，就垂直居中了。缺点是要控制内容不要换行,div,的垂直居中问题,margin,加倍的问题,设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;例如：,相应的css为,#IamFloat,float:left;,margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/,浮动,ie,产生的双倍距离,#box,float:left;width:100px;,margin:0 0 0 100px;/这种情况之下IE会产生200px的距离,display:inline;/使浮动忽略,这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);,#box,display:block;/可以为内嵌元素模拟为块元素,display:inline;/实现同一行排列的效果,diplay:table;,.,IE,与宽度和高度的问题,IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。,比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：,#box width:80px;height:35px;,htmlbody#box,width:auto;,height:auto;,min-width:80px;,min-height:35px;,页面的最小宽度,min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个 放到 标签下，然后为div指定一个类,然后CSS这样设计：,#container,min-width:600px;width:expression(document.body.clientWidth 600?600px:auto);,第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。,DIV,浮动,IE,文本产生,3,象素的,bug,左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.#box float:left;width:800px;#left float:left;width:50%;#right width:50%;,*html#left margin-right:-3px;/这句是关键,IE,捉迷藏的问题,当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。,有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。,解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。,float,的,div,闭合,;,清除浮动,;,自适应高度,例如：,这里的,NOTfloatC,并不希望继续平移，而是希望往下排。,(,其中,floatA,、,floatB,的属性已经设置为,float:left;),这段代码在,IE,中毫无问题，问题出在,FF,。原因是,NOTfloatC,并非,float,标签，必须将,float,标签闭合。在,之间加上,这个,div,一定要注意位置，而且必须与两个具有,float,属性的,div,同级，之间不能存在嵌套关系，否则会产生异常。并且将,clear,这种样式定义为为如下即可：,.clear clear:both;,作为外部,wrapper,的,div,不要定死高度,为了让高度能自动适应，要在,wrapper,里面加上,overflow:hidden;,当包含,float,的,box,的时候，高度自动适应在,IE,下无效，这时候应该触发,IE,的,layout,私有属性,(,万恶的,IE,啊！,),用,zoom:1;,可以做到，这样就达到了兼容。例如某一个,wrapper,如下定义：,.colwrapper overflow:hidden;zoom:1;margin:5px auto;,对于排版,我们用得最多的,css,描述可能就是,float:left.,有的时候我们需要在,n,栏的,float div,后面做一个统一的背景,譬如,:,比如我们要将,page,的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着,left center right,的向下拉长,而,page,居然保存高度不变,问题来了,原因在于,page,不是,float,属性,而我们的,page,由于要居中,不能设置成,float,所以我们应该这样解决,再嵌入一个,float left,而宽度是,100%,的,DIV,解决之,万能,float,闭合,(,非常重要,!),关于,clear float,的原理可参见,How To Clear Floats Without Structural Markup,将以下代码加入,Global CSS,中,给需要闭合的,div,加上,class=clearfix,即可,屡试不爽,./*Clear Fix*/.clearfix:after content:.;display:block;height:0;clear:both;visibility:hidden;.clearfix display:inline-block;/*Hide from IE Mac*/.clearfix display:block;/*End hide from IE Mac*/*end of clearfix*/,或者这样设置：,.hackbox display:table;/,将对象作为块元素级的表格显示,高度不适应,高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。,例：#box background-color:#eee;,#box p margin-top:20px;margin-bottom:20px;text-align:center;,p对象中的内容,解决方法：在P对象上下各加2个空的div对象CSS代码：.1height:0px;overflow:hidden;或者为DIV加上border属性。,IE6,下为什么图片下有空隙产生,解决这个,BUG,的方法也有很多,可以是改变,html,的排版,或者设置,img,为,display:block,或者设置,vertical-align,属性为,vertical-align:top|bottom|middle|text-bottom,都可以解决,.,如何对齐文本与文本输入框,加上 vertical-align:middle;,web,标准中定义,id,与,class,有区别吗,一,.web,标准中是不容许重复,ID,的,比如,div id=aa,不容许重复,2,次,而,class,定义的是类,理论上可以无限重复,这样需要多次引用的定义便可以使用他,.,二,.,属性的优先级问题,ID,的优先级要高于,class,看上面的例子,三,.,方便,JS,等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个,ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个,ID,来得简单,.,li,中内容超过长度后以省略号显示,此方法适用与IE与OP浏览器,web,标准中,IE,无法设置滚动条颜色,解决办法是将,body,换成,html,为什么无法定义,1px,左右高度的容器,IE6,下这个问题是因为默认的行高造成的,解决的方法也有很多,例如,:overflow:hidden|zoom:0.08|line-height:1px,怎么样才能让层显示在,FLASH,之上,解决的办法是给,FLASH,设置透明,怎样使一个层垂直居中于浏览器中,这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二,浏览器兼容,Div,居中问题,div设置 margin-left,margin-right 为 auto 时已经居中，IE 不行，IE需要设定body居中，首先在父级元素定义text-algin:center;这个的意思就是在父级元素内的内容居中。,链接,(a,标签,),的边框与背景,a,链接加边框和背景色，需设置,display:block,同时设置,float:left,保证不换行。参照,menubar,给,a,和,menubar,设置高度是为了避免底边显示错位,若不设,height,可以在,menubar,中插入一个空格。,链接访问后,hover,样式就不出现,被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序:L-V-H-A,Code:,游标手指,cursor,cursor:pointer,可以同时在,IE FF,中显示游标手指状，,hand,仅,IE,可以,UL,的,padding,与,margin,ul,标签在,FF,中默认是有,padding,值的,而在,IE,中只有,margin,默认有值,所以先定义,ulmargin:0;padding:0;,就能解决大部分问题,FORM,标签,这个标签在,IE,中,将会自动,margin,一些边距,而在,FF,中,margin,则是,0,因此,如果想显示一致,所以最好在,css,中指定,margin,和,padding,针对上面两个问题,我的,css,中一般首先都使用这样的样式,ul,formmargin:0;padding:0;,给定义死了,所以后面就不会为这个头疼了,.,BOX,模型解释不一致问题,在,FF,和,IE,中的,BOX,模型解释不一致导致相差,2px,解决方法：,divmargin:30px!important;margin:28px;,注意这两个,margin,的顺序一定不能写反，,important,这个属性,IE,不能识别，但别的浏览器可以识别。所以在,IE,下其实解释成这样：,div maring:30px;margin:28px,重复定义的话按照最后一个来执行，所以不可以只写,margin:xx px!important;#box width:600px;/for ie6.0-width:500px;/for ff+ie6.0#box width:600px!important/for ff width:600px;/for ff+ie6.0 width/*/:500px;/for ie6.0-,属性选择器,属性选择器(这个不能算是兼容,是隐藏css的一个bug)piddivid 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和Opera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如pid中,所有p标签中有id的都是同样式的.,最狠的手段,-!important,如果实在没有办法解决一些细节问题,可以用这个方法.FF对于,”,!important,”,会自动优先解