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

DIV+CSS浏览器兼容方 法的总结 什么是浏览器兼容 什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一 些不兼容的问题，有的显示出来正常，有的显示出来不正 常，我们在编写CSS的时候会很恼火，刚修复了这个浏览 器的问题，结果另外一个浏览器却出了新问题。而兼容就 是一种办法，能让你在一个CSS里面独立的写支持不同浏 览器的样式。这下就和谐了。 一、CSS 兼容 IE6/IE77对FireFox !important 方法 IE6/IE77对FireFox 代码: #wrapper width: 120px; /* FireFox */ *html #wrapper width: 80px; /* ie6 fixed */ *+html #wrapper width: 60px; /* ie7 fixed, 注意顺序 */ 注意: *+html 对IE7的兼容 必须保证HTML顶部有如下声明： 代码: !important 先来说一下什么是css hack ，简单的说针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。Css hack的原理：由于不同的浏览器对CSS的支持及解析结果不一样， 还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。比如 IE6能识别下划线“_“和星号“ * “，IE7能识别星号“ * “，但不能识别下划线“_“，而firefox两个都不能 认识。书写顺序，一般是将识别能力强的浏览器的CSS写在后面 浏览器优先级别:FF 无标题文档 div width:800px; height:250px; background-color:yellow!important;/*提升指定样式规则的应用优先权*/ background-color:red; border:3px solid #000!important;/*firefox*/ *border:5px solid #f00!important;/*Ie7.0*/ border:1px solid #000;/*Ie6.0*/ 例一： CSS #box color: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的背景颜色是绿色 例三： CSS 1 #box div color:red; 2 .important_false color:blue; 3.important_true color: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。 将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽. 代码: /* Clear Fix */ .clearfix:after content:”.”;(加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE 不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。 ) 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 */ 三、其他兼容技巧 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会. 2, 居中问题. 1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vetical- align: middle.(缺点是要控制内容不要换行 .) 2).水平居中. margin: 0 auto;(当然不是万能) 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 的双倍边距 BUG body margin:0 div float:left; margin-left:10px; ; height:200px; border:1px solid red 浮动后本来外边距10px, 但IE 解释为20px, 解决办法是加上 display:inline 例如： 相应的css为 #IamFloat float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ 9、为什么FF 下文本无法撑开容器的高度？ 标准浏览器中固定高度值的容器是不会象IE6 里那样被撑开的, 那我又想固定 高度，又想能被撑开需要怎样设置呢？办法就是去掉height 设 置min- height:200px; 这里为了照顾不认识min-height 的IE6 可以这样定义： div height:auto!important; height:200px; min-height:200px; 10、页面的最小宽度 min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度， 这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使 。为了让这一命令在IE上也能用，可以把一个 放到 标签下，然后为div指 定一个类： 然后CSS这样设计： #container min-width: 600px; width:expression(document.body.clientWidth 12、高度不适应 min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度， 这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使 。为了让这一命令在IE上也能用，可以把一个 放到 标签下，然后为div指 定一个类： 高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是 当内层对象使用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属性。 13、如何对齐文本与文本输入框 加上 vertical-align:middle; 例： 14、如何定义1px左右高度的容器 E6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden 或 line-height:1px 15、怎么样才能让层显示在FLASH之上呢 解决的办法是给FLASH设置透明 16、超链接访问过后hover样式就不出现的问题 被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题 ,解决方法是改变CSS属性的排列顺序: 17、FORM标签 这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此, 如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题, 我的css中一般首先都使用这样的样式 ul,formmargin