zoukankan      html  css  js  c++  java
  • DIV+CSS解决IE6,IE7,IE8,FF兼容问题

    1.ie8下兼容问题,这个最好处理,转化成ie7兼容就可以。在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了

    <meta http-equiv="x-ua-compatible" content="ie=7" />

    2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如

    margin-left:10px !important;/*IE7,IE8,FF下是10PX*/;

    margin-left:5px;/*IE6下属性写的是5PX,但在显示出来的是10px

    3.清除块display,这个可以解决浮动造成的块,造成块后,当DIV背景填色或填图片的时候,会出现背景断开或差一小块。这种兼容出现的不太多,我做到现在,只遇到过两次,方法是在出现兼容的DIV的CSS中写一个display:block,或其它属性,中文什么意思我不知道,我英语差,但能达到想要的效果,6 e" Z+ e% |8 G# |

    4.很多朋友DIV+CSS的时候,会出现,在IE的几个浏览器下都好了,但是在FF出问题了,用!important又会把IE7做的不兼容,很头疼,在想,有没有什么方法只对FF下进行操做,我用过这个方法,感觉得是百试不爽,就是在属性前面加符号如:*、&,¥,#,@,—,+,加过符号的属性只有IE的浏览器才识别,而FF不识别,方法如下(注意有符号的属性和没符号的属性的顺序)

    height:100px;/*FF下显示100的高*/

    +height:120px;/*IE678下显示120高*/

    5.有时候,会在布局的时候,发现,有一个DIV浮动了,接下来的一个DIV本来是要在下面显示的,结果跑上面去了,这种情况一般在FF下面会出现,解决的办法就是清除一下浮动,在设置过浮动的那个DIV下面加一个DIV,CSS面写个clear:both;如下<div style="float:left;height:100px; 500px;">

    <div style="clear:both;">

    <div style="height:100px; width=300px">

    6. 再就是居中问题,这个问题在新手身上很多,主要原因是对盒子模型不够理解,没熟记盒子模型,如果发现你的页面没有局中,我现在知道的,有这几个原因:1. 一个是没盒子,就是BODY后的一个大DIV把所有DIV装起来的那个,你没写。2.就是你写了,但是宽度没用绝对宽度:而是用一个相对的宽度,想局中,必须用绝对宽度。

    7.扩展:如果我想在设计的时候,实现IE6,IE7,FF下出现三种不同的效果,比如IE6下背景红色,IE7下蓝色FF下绿色,这里,我自己试过,可以,用兼容的方法(注意顺序,可以好好理解一下)。7 L& t- o7 k- a1 I

    background:red;/*FF里显示的红色*/

    +background:blue !important;/*IE7下面显示的蓝色*/

    +background:green;/*IE6下面显示的绿色*/

  • 相关阅读:
    高效 告别996,开启java高效编程之门 5-4新集合类型MultiSet
    高效 告别996,开启java高效编程之门 5-3不可变集合
    高效 告别996,开启java高效编程之门 5-2实战Optional使用
    高效 告别996,开启java高效编程之门 5-1Guava开场
    高效 告别996,开启java高效编程之门 4-6本节总结
    高效 告别996,开启java高效编程之门 4-5TWR进阶与特殊情况
    高效 告别996,开启java高效编程之门 4-4TWR方式关闭流资源
    高效 告别996,开启java高效编程之门 4-3传统方式关闭流资源
    省市经纬度
    Web移动端常见问题-摘抄
  • 原文地址:https://www.cnblogs.com/huangjihua/p/4125202.html
Copyright © 2011-2022 走看看