DIVCSS浏览器兼容方法的总结.ppt

DIV+CSS浏览器兼容方法的总结,什么是浏览器兼容,什么是浏览器兼容：当我们使用不同的浏览器（FirefoxIE7IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。而兼容就是一种办法，能让你在一个CSS里面独立的写支持不同浏览器的样式。这下就和谐了。,一、CSS兼容,IE6/IE77对FireFox!important方法,IE6/IE77对FireFox代码:#wrapperwidth:120px;/*FireFox*/*html#wrapperwidth:80px;/*ie6fixed*/*+html#wrapperwidth:60px;/*ie7fixed,注意顺序*/注意:*+html对IE7的兼容必须保证HTML顶部有如下声明：代码:,!important先来说一下什么是csshack，简单的说针对不同的浏览器写不同的CSScode的过程，就叫CSShack,也叫写CSShack。Csshack的原理：由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。比如IE6能识别下划线_和星号*，IE7能识别星号*，但不能识别下划线_，而firefox两个都不能认识。书写顺序，一般是将识别能力强的浏览器的CSS写在后面浏览器优先级别:FFIE7IE6,CSShack书写顺序一般为FFIE7IE6!important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用.(1)区别ie与firefox的hack为:border:2pxsolid#f00;*border:1pxsolid#f00;(2)区别Ie6.0与Ie7.0、firefox的hack为:border:1pxsolid#f00!important;border:2pxsolid#f00;在(1)中，之所以把*放在后面是因为ff不识别*而导致只对它设置了一次border;而ie系列进行了两次border设置后，后一个属性覆盖了前一个属性，故为一像素的边框。在(2)中，之所以把!important放在第一个border设置，是因为它把这次border的优先级提高了，即使后面在一次甚至在N次设置border也无效，但是Ie6.0对这个规则不接受，而导致它应用了第二次的border设置，也就是第二次覆盖了第一次的这一原理，并不是它不识别!important;所以它的border为2像素的红框.,这是一个简单的应用：无标题文档divwidth:800px;height:250px;background-color:yellow!important;/*提升指定样式规则的应用优先权*/background-color:red;border:3pxsolid#000!important;/*firefox*/*border:5pxsolid#f00!important;/*Ie7.0*/border:1pxsolid#000;/*Ie6.0*/,例一：CSS#boxcolor:red!important;color:blue;HTML在不同的浏览器下，这行字的色应该不同！这个例子应该是大家经常见到的important的用法了，在IE环境下，这行字是蓝色，在firefox下，为红色。,例二：1IE6和firefox的区别：background:orange;*background:blue;意思就是火狐浏览器的背景颜色是橙色,而IE浏览器的背景色是蓝色.2.IE6和IE7的区别：background:green!important;background:blue;意思指的是:IE7的背景颜色是绿色,IE6的背景颜色是蓝色3.区别IE7与FF：background:orange;*background:green;意思指的是:火狐浏览器的背景颜色是橙色,而IE7的背景颜色是绿色,例三：CSS1#boxdivcolor:red;2.important_falsecolor:blue;3.important_truecolor:blue!important;HTML这一行末使用important这一行使用了important例二中，CSS代码第一行设定了box里面所有div中字体色为红色，第二行和第三行都用class重新定义了自身div的字体色为蓝色，不同的是，第二行末使用important，而第三行使用了！默认情况下，class的优先级小于id，所以，第二行中即使用class重定义了自身样式，也无法生效，所以继承父级属性，这行字还是红色！但是，第三行中，用了important提升优先级（或看成强制重定义），所以这里的css得以生效，这行字变为了蓝色！,从这个例子，得以证明，ie对important的并不是不支持！那么为什么很多人都说ie不认识它呢？我想应该是大家实战中可能都没有遇到例子中的情况：当你想提升class的优先级时怎么办？也就是说大家可能都忽略了它的这一作用，只了解在命名为同一个元素的CSS代码块中，用它来提升排列顺序相对靠前的代码的优先级（例一）！通过上边两个例子，得以总结：important对一个良好（或者是标准）的浏览器来说，不仅仅是从顺序上提升代码的优先级，还可以用来提升class的优先级（比如firefox），但是从IE对前者的不支持可以看出，这只是IE的一大BUG，而不能说它“不认识、不支持”！,二、万能float闭合(非常重要!),HTML中的所有对象几乎都默认分为两种:block对象和in-line对象.其中,block默认的显示状态是占据整行;inline对象则相反,允许其他对象与它在一行中显示.这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,.不可控制(内嵌元素);现在来看float属性,它的作用就是改变block对象的默认显示方式.block对象设置了float属性之后,它将不再独自占据一行.如果有一个div的属性是float:left,它后面又跟着一个div，这个div就会自动跟在前一个div的后面，跟着浮动，你如果不希望后面的div跟着浮动，你就需要将div闭合，这样不会干扰后面的div。,将以下代码加入GlobalCSS中,给需要闭合的div加上class=”clearfix”即可,屡试不爽.代码:/*ClearFix*/.clearfix:aftercontent:”.”;(加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie浏览器支持，所以并不影响到IE/WIN浏览器。)display:block;height:0;clear:both;visibility:hidden;.clearfixdisplay:inline-block;/*HidefromIEMac*/.clearfixdisplay:block;/*EndhidefromIEMac*/*endofclearfix*/,三、其他兼容技巧,1,FF下给div设置padding后会导致width和height增加,但IE不会.2,居中问题.1).垂直居中.将line-height设置为当前div相同的高度,再通过vetical-align:middle.(缺点是要控制内容不要换行.)2).水平居中.margin:0auto;(当然不是万能)3,若需给a标签内内容加上样式,需要设置display:block;(常见于导航标签)4,FF和IE对BOX理解的差异导致相差2px的还有设为float的div在ie下margin加倍等问题.5,ul标签在FF下面默认有list-style和padding.最好事先声明ulmargin:0;padding:0;,以避免不必要的麻烦.(常见于导航标签和内容列表)6,作为外部wrapper的div不要定死高度,最好还加上overflow:hidden.以达到高度自适应.7,关于手形光标.cursor:pointer.而hand只适用于IE.,8、IE6的双倍边距BUGbodymargin:0divfloat:left;margin-left:10px;height:200px;border:1pxsolidred浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline例如：相应的css为#IamFloatfloat:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/9、为什么FF下文本无法撑开容器的高度？标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px;这里为了照顾不认识min-height的IE6可以这样定义：divheight:auto!important;height:200px;min-height:200px;,10、页面的最小宽度min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个放到标签下，然后为div指定一个类：然后CSS这样设计：#containermin-width:600px;width:expression(document.body.clientWidth,12、高度不适应min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个放到标签下，然后为div指定一个类：高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin或paddign时。例：#boxbackground-color:#eee;#boxpmargin-top:20px;margin-bottom:20px;text-align:center;p对象中的内容解决方法：在P对象上下各加2个空的div对象CSS代码：.1height:0px;overflow:hidden;或者为DIV加上border属性。,13、如何对齐文本与文本输入框加上vertical-align:middle;例：14、如何定义1px左右高度的容器E6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden或line-height:1px15、怎么样才能让层显示在FLASH之上呢解决的办法是给FLASH设置透明16、超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序:,17、FORM标签这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和padding,针对上面两个问题,我的css中一般首先都使用这样