兼容性_兼容性设置 - CSDN
精华内容
参与话题
  • 最全整理浏览器兼容性问题与解决方案

    万次阅读 多人点赞 2018-02-26 11:44:36
    常见浏览器兼容性问题与解决方案 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站...

    常见浏览器兼容性问题与解决方案

      所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

      在学习浏览器兼容性之前,我想把前端开发人员划分为两类:

      第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器的bug,并且他们制作的页面后期易维护,代码重用问题少,可以说是比较牢固放心的代码。

      第二类是基本按照设计图来开发的前端开发人员,很多细枝末节差距很大,不如间距,行高,图片位置等等经常会差几px。某种效果的实现也是反复调试得到,具体为什么出现这种效果还模模糊糊,整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器,而是他们的技术本身了。

      文章主要针对的是第一类,严谨型的开发人员,因此这里主要从浏览器解析差异的角度来分析兼容性问题。

      浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同
    W.SVP.ZU%9

      问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。

      碰到频率:100%

      解决方案:CSS里    *

      备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

      浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大

      问题症状:常见症状是IE6中后面的一块被顶到下一行

      碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)

      解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性

      备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

      浏览器兼容问题三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度

      问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度

      碰到频率:60%

      解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

      备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

      浏览器兼容问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug

      问题症状:IE6里的间距比超过设置的间距

      碰到几率:20%

      解决方案:在display:block;后面加入display:inline;display:table;

      备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

      浏览器兼容问题五:图片默认有间距

      问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。

      碰到几率:20%

      解决方案:使用float属性为img布局

      备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。(我的一个学生使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以我禁止他们使用)

      浏览器兼容问题六:标签最低高度设置min-height不兼容

      问题症状:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容

      碰到几率:5%

      解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !ImportAnt; height:200px; overflow:visible;}

      备注:在B/S系统前端开时,有很多情况下我们又这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

      浏览器兼容问题七:透明度的兼容CSS设置

      做兼容页面的方法是:每写一小段代码(布局中的一行或者一块)我们都要在不同的浏览器中看是否兼容,当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的,只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话,就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

    1.     /* CSS hack*/ 

    我很少使用hacker的,可能是个人习惯吧,我不喜欢写的代码IE不兼容,然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类:IE6 ;IE7和遨游;其他(IE8 Chrome ff Safari opera等)

      ◆IE6认识的hacker 是下划线_ 和星号 *

      ◆IE7 遨游认识的hacker是星号 *

      比如这样一个CSS设置:

    1.     height:300px;*height:200px;_height:100px; 

      IE6浏览器在读到height:300px的时候会认为高时300px;继往下读,他也认识*heihgt, 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置,认为高度是200px。继续往下读,IE6还认识_height,所以他又会覆盖掉200px高的设置,把高度设置为100px;

    IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了,因为它们不认识_height。所以它们会把高度解析为200px,剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的。

     

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!


    所有浏览器 通用 
    height: 100px; 

    IE6 专用 
    _height: 100px; 

    IE6 专用 
    *height: 100px; 

    IE7 专用 
    *+height: 100px; 

    IE7、FF 共用 
    height: 100px !important;

    一、CSS 兼容 
    以下两种方法几乎能解决现今所有兼容. 

    1, !important (不是很推荐,用下面的一种感觉最安全) 

    随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)

    代码: 
    <style> 
    #wrapper { 
    width: 100px!important; /* IE7+FF */ 
    width: 80px; /* IE6 */ 

    </style> 


    2, IE6/IE77对FireFox <from 针对firefoxie6 ie7的css样式> 

    *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html又为 IE7特有标签. 

    代码: 
    <style> 
    #wrapper { width: 120px; } /* FireFox */ 
    *html #wrapper { width: 80px;} /* ie6 fixed */ 
    *+html #wrapper { width: 60px;} /* ie7 fixed, 
    注意顺序 */ 
    </style> 

    注意: 
    *+html 对IE7的兼容 必须保证HTML顶部有如下声明: 

    代码: 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    二、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对, 

    关于 clear float 的原理可参见 [How ToClear Floats Without Structural Markup] 
    将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽. 

    代码: 
    <style> 
    /* 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 */ 
    </style>


    ***********************************************************************************************************************

    三、其他兼容技巧(相当有用) 

    1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 
    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 . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表) 
    6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应. 
    7, 关于手形光标. cursor: pointer. 而hand只适用于 IE.贴上代码: 

    兼容代码:兼容最推荐的模式。 
    /* FF */ 
    .submitbutton { 
    float:left; 
    width: 40px; 
    height: 57px; 
    margin-top: 24px; 
    margin-right: 12px; 

    /* IE6 */ 
    *html .submitbutton { 
    margin-top: 21px; 

    /* IE7 */ 
    *+html .submitbutton { 
    margin-top: 21px; 






    什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,有的显示出来正常,有的显示出来不正常,我们在编写CSS的时候会很恼火,刚修复了这个浏览器的问题,结果另外一个浏览器却出了新问题。而兼容就是一种办法,能让你在一个CSS里面独立的写支持不同浏览器的样式。这下就和谐了。呵呵! 

    最近微软发布的IE7浏览器的兼容性确实给一些网页制 作人员添加了一个沉重的负担,虽然IE7已经走向标准化,但还是有许多和FF不同的地方,所以需要用到IE7的兼容,有许多朋友问过IE7的兼容是什么, 其实我也不知道。暂时还没找到IE7专用的兼容。除了前面那片文章,《针对firefox ie6 ie7的css样式》中的兼容方式也是很好用的。 

    有一点逻辑思想的人都会知道可以用IE和FF的兼容结合起来使用,下面介绍三个兼容,例如:(适合新手,呵呵,高手就在这里路过吧。) 

    程序代码 

    第一个兼容,IE FF 所有浏览器 公用(其实也不算是兼容) 
    height:100px; 
    第二个兼容 IE6专用 
    _height:100px; 
    第三个兼容 IE6 IE7公用 
    *height:100px; 

    介绍完了这三个兼容了,下面我们再来看看如何在一个样式里分别给一个属性定义IE6 IE7 FF专用的兼容,看下面的代码,顺序不能错哦: 

    程序代码 

    height:100px; 
    *height:120px; 
    _height:150px; 

    下面我简单解释一下各浏览器怎样理解这三个属性: 

    在FF下,第2、3个属性FF不认识,所以它读的是height:100px; 

    在IE7下,第三个属性IE7不认识,所以它读第1、2个属性,又因为第二个属性覆盖了第一个属性,所以IE7最终读出的是第2个属性*height:120px; 

    在IE6下,三个属性IE6都认识,所以三个属性都可以读取,又因为第三个属性覆盖掉前2个属性,所以IE6最终读取的是第三个属性。 





    1 针对firefox ie6 ie7的css样式 

    现在大部分都是用!important来兼容,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面 没按要求显示!找到一个针对IE7不错的兼容方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了现在写一个CSS可以这样: 

    #1 { color: #333; } /* Moz */ 
    * html #1 { color: #666; } /* IE6 */ 
    *+html #1 { color: #999; } /* IE*/ 


    那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。 

    2 css布局中的居中问题 

    主要的样式定义如下: 

    body {TEXT-ALIGN: center;} 
    #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 


    说明: 

    首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。 

    但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 

    需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的div里定义MARGIN-RIGHT:auto;MARGIN-LEFT: auto; 就可以了。 

    3 盒模型不同解释. 

    #box{ 
    width:600px; 
    //for ie6.0- w\idth:500px; 
    //for ff+ie6.0 

    #box{ 
    width:600px!important 
    //for ff 
    width:600px; 
    //for ff+ie6.0 
    width /**/:500px; 
    //for ie6.0- 


    4 浮动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; 

    5 IE与宽度和高度的问题 

    IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。比如要设置背景图片,这个宽度是比较重 要的。要解决这个问题,可以这样: 

    #box{ width: 80px; height: 35px;}html>body #box{width: auto; height: auto; min-width: 80px; min-height: 35px;} 

    6 页面的最小宽度 

    min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类: 
    然后CSS这样设计: 

    #container{ 
    min-width: 600px; 
    width:e-xpression(document.body.clientWidth < 600? “600px”: “auto” ); 


    第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 

    7 清除浮动 

    .兼容box{ 
    display:table; 
    //将对象作为块元素级的表格显示 


    或者 

    .兼容box{ 
    clear:both; 


    或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所以并不影响到IE/WIN浏览器。这种的最麻烦的 

    ……#box:after{ 
    content: “.”; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 


    8&nbp;DIV浮动IE文本产生3象素的bug 

    左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距. 

    #box{ 
    float:left; 
    width:800px;} 
    #left{ 
    float:left; 
    width:50%;} 
    #right{ 
    width:50%; 

    *html #left{ 
    margin-right:-3px; 
    //
    这句是关键 

    HTML
    代码 
    <DIV id=box> 
    <DIV id=left></DIV> 
    <DIV id=right></DIV> 
    </DIV> 

    9 属性选择器(这个不能算是兼容,是隐藏css的一个bug) 

    p[id]{}div[id]{} 
    p[id]{}div[id]{} 


    这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用 

    属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的. 

    10 IE捉迷藏的问题 

    当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。 
    有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。 
    解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。 

    11 高度不适应 

    高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用 
    margin 或paddign 时。例: 

    <div id=”box”> 
    <p>p
    对象中的内容</p>
    </div> 

    CSS
    : 

    #box {background-color:#eee; } 
    #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } 

    解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。 





    屏蔽IE浏览器(也就是IE下不显示) 
    *:lang(zh) select {font:12px !important;} /*FF,OP可见*/ 
    select:empty {font:12px !important;} /*safari可见*/ 
    这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。 

    仅IE7识别 
    *+html {…} 
    当面临需要只针对IE7做样式的时候就可以采用这个兼容。 

    IE6及IE6以下识别 
    * html {…} 
    这个地方要特别注意很多地主都写了是IE6的兼容其实IE5.x同样可以识别这个兼容。其它浏览器不识别。 
    html/**/ >body select {……} 
    这句与上一句的作用相同。 

    仅IE6不识别 
    select { display /*IE6不识别*/:none;} 
    这里主要是通过CSS注释分开一个属性与值,流释在冒号前。 

    仅IE6与IE5不识别 
    select/**/ { display /*IE6,IE5不识别*/:none;} 
    这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。

    仅IE5不识别 
    select/*IE5不识别*/ { display:none;} 
    这一句是在上一句中去掉了属性区的注释。只有IE5不识别 

    盒模型解决方法 
    selct {width:IE5.x宽度; voice-family:""}""; voice-family:inherit; width:正确宽度;} 
    盒模型的清除方法不是通过!important来处理的。这点要明确。 

    清除浮动 
    select:after {content:"."; display:block; height:0; clear:both;visibility:hidden;} 
    在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的兼容来对父级做一次定义,那么就可以解决这个问题。 

    截字省略号 
    select { -o-text-overflow:ellipsis; text-overflow:ellipsis;white-space:nowrapoverflow:hidden; } 
    这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。 

    只有Opera识别 
    @media all and (min-width: 0px){ select {……} } 
    针对Opera浏览器做单独的设定。 

    以上都是写CSS中的一些兼容,建议遵循正确的标签嵌套(divul li 嵌套结构关系),这样可以减少你使用兼容的频率,不要进入理解误区,并不是一个页面就需要很多的兼容来保持多浏览器兼容),很多情况下也许一个兼容都不用 也可以让浏览器工作得非常好,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在 CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。 

    IE5.x的过滤器,只有IE5.x可见 
    @media tty { 
    i{content:"";/*" "*/}} @import ’ie5win.css’; /*";} 
    }/* */ 

    IE5/MAC的过滤器,一般用不着 
    /**//*/ 
    @import "ie5mac.css"; 
    /**/ 

    下面是IE的条件注释,个人觉得用条件注释调用相应 兼容是比较完美的多浏览器兼容的解决办法。把需要兼容的地方单独放到一个文件里面,当浏览器版本符合的时候就可以调用那个被兼容的样式,这样不仅使用起来非常方便,而且对于制作这个CSS本身来讲,可以更严格的观察到是否有必要使用兼容,很多情况下,当我本人写CSS如果把全部代码包括兼容都写到一个 CSS文件的时候的时候会很随意,想怎么兼容就怎么兼容,而你独立出来写的时候,你就会不自觉的考虑是否有必要兼容,是先兼容 CSS?还是先把主CSS里面的东西调整到尽可能的不需要兼容?当你仅用很少的兼容就让很多浏览器很乖很听话的时候,你是不是很有成就感呢?你知道怎么选择了吧~~呵呵 

    IE的if条件兼容 自己可以灵活使用参看这篇IE条件注释 
    Only IE 
    所有的IE可识别 

    只有IE5.0可以识别 
    Only IE 5.0+ 
    IE5.0包换IE5.5都可以识别 

    仅IE6可识别 
    Only IE 7/- 
    IE6以及IE6以下的IE5.x都可识别 
    Only IE 7/- 
    仅IE7可识别 





    Css 当中有许多的东西不不按照某些规律来的话,会让你很心烦,虽然你可以通过很多的兼容,很多的!important来控制它,但是你会发现长此以往你会很不甘心,看看许多优秀的网站,他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕?而他们看似复杂的模版下面使用的兼容少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐,我们找到一定的方法,是完全可以让他们和谐共处的。不要你认为发现了兼容的办法,你就掌握了一切,我们并不是兼容的奴隶。 

    div ul li 的嵌套顺序 

    今天只讲一个规则。就是<div><ul><li>的三角关系。我的经验就是<div>在最外面,里面 是<ul>,然后再是<li>,当然<li>里面又可以嵌套<div>什么的,但是并不建议你嵌套很多 东西。当你符合这样的规则的时候,那些倒霉的,不听话的间隙就不会在里面出现了,当你仅仅是<div>里面放<li>,而不 用<ul>的时候,你会发现你的间隙十分难控制,一般情况下,IE6和IE7会凭空多一些间距。但很多情况你来到下一行,间隙就没了,但是前 面的内容又空了很大一块,出现这种情况虽然你可以改变IE的Margin,然后调整Firefox下面的Padding,以便使得两者显示起来得效果很相 似,但是你得CSS将变得臭长无比,你不得不多考虑更多可能出现这种问题补救措施,虽然你知道千篇一律来兼容它们,但是你会烦得要命。 

    具体嵌套写法 

    遵循上面得嵌套方式,<div><ul><li></li></ul></div>然后在CSS 里面告诉 ul {Margin:0pxadding:0px;list- style:none;},其中list-style:none是不让<li>标记的最前方显示圆点或者数字等目录类型的标记,因为IE和 Firefox显示出来默认效果有些不一样。因此这样不需要做任何手脚,你的IE6、和IE7、Firefox显示出来的东西(外距,间距,高度,宽度) 就几乎没什么区别了,也许细心的你会在某一个时刻发现一、两个象素的差别,但那已经很完美了,不需要你通过调整大片的CSS来控制它们的显示了,你愿意, 你可以仅仅兼容一两个地方,而且通常这种兼容可以适应各种地方,不需要你重复在不同的地方调试不同的兼容方式–减轻你的烦 overflow:hidden; } 
    这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。 

    只有Opera识别 
    @media all and (min-width: 0px){ select {……} } 
    针对Opera浏览器做单独的设定。 

    以上都是写CSS中的一些兼容,建议遵循正确的标签嵌套(divul li 嵌套结构关系),这样可以减少你使用兼容的频率,不要进入理解误区,并不是一个页面就需要很多的兼容来保持多浏览器兼容),很多情况下也许一个兼容都不用 也可以让浏览器工作得非常好,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在 CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。 

    IE5.x的过滤器,只有IE5.x可见 
    @media tty { 
    i{content:"";/*" "*/}} @import ’ie5win.css’; /*";} 
    }/* */ 

    IE5/MAC的过滤器,一般用不着 
    /**//*/ 
    @import "ie5mac.css"; 
    /**/ 

    下面是IE的条件注释,个人觉得用条件注释调用相应 兼容是比较完美的多浏览器兼容的解决办法。把需要兼容的地方单独放到一个文件里面,当浏览器版本符合的时候就可以调用那个被兼容的样式,这样不仅使用起来非常方便,而且对于制作这个CSS本身来讲,可以更严格的观察到是否有必要使用兼容,很多情况下,当我本人写CSS如果把全部代码包括兼容都写到一个 CSS文件的时候的时候会很随意,想怎么兼容就怎么兼容,而你独立出来写的时候,你就会不自觉的考虑是否有必要兼容,是先兼容 CSS?还是先把主CSS里面的东西调整到尽可能的不需要兼容?当你仅用很少的兼容就让很多浏览器很乖很听话的时候,你是不是很有成就感呢?你知道怎么选择了吧~~呵呵 

    IE的if条件兼容 自己可以灵活使用参看这篇IE条件注释 
    Only IE 
    所有的IE可识别 

    只有IE5.0可以识别 
    Only IE 5.0+ 
    IE5.0包换IE5.5都可以识别 

    仅IE6可识别 
    Only IE 7/- 
    IE6以及IE6以下的IE5.x都可识别 
    Only IE 7/- 
    仅IE7可识别 





    Css 当中有许多的东西不不按照某些规律来的话,会让你很心烦,虽然你可以通过很多的兼容,很多的!important来控制它,但是你会发现长此以往你会很不甘心,看看许多优秀的网站,他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起 来完美无缺是不是很羡慕?而他们看似复杂的模版下面使用的兼容少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐,我们找到一定的方法,是完全可以让他们和谐共处的。不要你认为发现了兼容的办法,你就掌握了一切,我们并不是兼容的奴隶。 

    div ul li 的嵌套顺序 

    今天只讲一个规则。就是<div><ul><li>的三角关系。我的经验就是<div>在最外面,里面 是<ul>,然后再是<li>,当然<li>里面又可以嵌套<div>什么的,但是并不建议你嵌套很多 东西。当你符合这样的规则的时候,那些倒霉的,不听话的间隙就不会在里面出现了,当你仅仅是<div>里面放<li>,而不 用<ul>的时候,你会发现你的间隙十分难控制,一般情况下,IE6和IE7会凭空多一些间距。但很多情况你来到下一行,间隙就没了,但是前 面的内容又空了很大一块,出现这种情况虽然你可以改变IE的Margin,然后调整Firefox下面的Padding,以便使得两者显示起来得效果很相 似,但是你得CSS将变得臭长无比,你不得不多考虑更多可能出现这种问题补救措施,虽然你知道千篇一律来兼容它们,但是你会烦得要命。 

    具体嵌套写法 

    遵循上面得嵌套方式,<div><ul><li></li></ul></div>然后在CSS 里面告诉 ul{Margin:0pxadding:0px;list- style:none;},其中list-style:none是不让<li>标记的最前方显示圆点或者数字等目录类型的标记,因为IE和 Firefox显示出来默认效果有些不一样。因此这样不需要做任何手脚,你的IE6、和IE7、Firefox显示出来的东西(外距,间距,高度,宽度) 就几乎没什么区别了,也许细心的你会在某一个时刻发现一、两个象素的差别,但那已经很完美了,不需要你通过调整大片的CSS来控制它们的显示了,你愿意, 你可以仅仅兼容一两个地方,而且通常这种兼容可以适应各种地方,不需要你重复在不同的地方调试不同的兼容方式–减轻你的烦 overflow:hidden; } 
    这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。 

    只有Opera识别 
    @media all and (min-width: 0px){ select {……} } 
    针对Opera浏览器做单独的设定。 

    以上都是写CSS中的一些兼容,建议遵循正确的标签嵌套(divul li 嵌套结构关系),这样可以减少你使用兼容的频率,不要进入理解误区,并不是一个页面就需要很多的兼容来保持多浏览器兼容),很多情况下也许一个兼容都不用 也可以让浏览器工作得非常好,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在 CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。 

    IE5.x的过滤器,只有IE5.x可见 
    @media tty { 
    i{content:"";/*" "*/}} @import ’ie5win.css’; /*";} 
    }/* */ 

    IE5/MAC
    的过滤器,一般用不着 
    /**//*/ 
    @import "ie5mac.css"; 
    /**/ 


    下面是IE的条件注释,个人觉得用条件注释调用相应 兼容是比较完美的多浏览器兼容的解决办法。把需要兼容的地方单独放到一个文件里面,当浏览器版本符合的时候就可以调用那个被兼容的样式,这样不仅使用起来非常方便,而且对于制作这个CSS本身来讲,可以更严格的观察到是否有必要使用兼容,很多情况下,当我本人写CSS如果把全部代码包括兼容都写到一个 CSS文件的时候的时候会很随意,想怎么兼容就怎么兼容,而你独立出来写的时候,你就会不自觉的考虑是否有必要兼容,是先兼容 CSS?还是先把主CSS里面的东西调整到尽可能的不需要兼容?当你仅用很少的兼容就让很多浏览器很乖很听话的时候,你是不是很有成就感呢?你知道怎么选择了吧~~呵呵 

    IE的if条件兼容 自己可以灵活使用参看这篇IE条件注释
    Only IE 
    所有的IE可识别 

    只有IE5.0可以识别 
    Only IE 5.0+ 
    IE5.0包换IE5.5都可以识别 

    仅IE6可识别 
    Only IE 7/- 
    IE6以及IE6以下的IE5.x都可识别 
    Only IE 7/- 
    仅IE7可识别 





    Css 当中有许多的东西不不按照某些规律来的话,会让你很心烦,虽然你可以通过很多的兼容,很多的!important来控制它,但是你会发现长此以往你会很不甘心,看看许多优秀的网站,他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起 来完美无缺是不是很羡慕?而他们看似复杂的模版下面使用的兼容少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐,我们找到一定的方法,是完全可以让他们和谐共处的。不要你认为发现了兼容的办法,你就掌握了一切,我们并不是兼容的奴隶。 

    div ul li 的嵌套顺序 

    今天只讲一个规则。就是<div><ul><li>的三角关系。我的经验就是<div>在最外面,里面 是<ul>,然后再是<li>,当然<li>里面又可以嵌套<div>什么的,但是并不建议你嵌套很多 东西。当你符合这样的规则的时候,那些倒霉的,不听话的间隙就不会在里面出现了,当你仅仅是<div>里面放<li>,而不 用<ul>的时候,你会发现你的间隙十分难控制,一般情况下,IE6和IE7会凭空多一些间距。但很多情况你来到下一行,间隙就没了,但是前 面的内容又空了很大一块,出现这种情况虽然你可以改变IE的Margin,然后调整Firefox下面的Padding,以便使得两者显示起来得效果很相 似,但是你得CSS将变得臭长无比,你不得不多考虑更多可能出现这种问题补救措施,虽然你知道千篇一律来兼容它们,但是你会烦得要命。 

    具体嵌套写法 

    遵循上面得嵌套方式,<div><ul><li></li></ul></div>然后在CSS 里面告诉 ul {Margin:0pxadding:0px;list- style:none;},其中list-style:none是不让<li>标记的最前方显示圆点或者数字等目录类型的标记,因为IE和 Firefox显示出来默认效果有些不一样。因此这样不需要做任何手脚,你的IE6、和IE7、Firefox显示出来的东西(外距,间距,高度,宽度) 就几乎没什么区别了,也许细心的你会在某一个时刻发现一、两个象素的差别,但那已经很完美了,不需要你通过调整大片的CSS来控制它们的显示了,你愿意, 你可以仅仅兼容一两个地方,而且通常这种兼容可以适应各种地方,不需要你重复在不同的地方调试不同的兼容方式–减轻你的烦。你可以ul.class1, ul.class2, ul.class3{xxx:xxxx}的方式方便的整理出你要兼容的地方,而统一兼容。尝试一下吧,再也不要乱嵌套了,虽然在Div+CSS的方式下你几乎可以想怎么嵌套就怎么嵌套,但是按照上面的规律你将轻松很多,从而事半功倍!

    去掉ie有默认最低高度

    <div style="height:2px;background:red;overflow:hidden;"></div>

    其中height:2px为你要设的高度,overflow:hidden最为关键,他就是帮你去掉默认高度

     

    随着最新CSS的不断完善,越来越多的网站采用DIV+CSS布局。而原来使用table套 table的网页布局模式也逐渐应该淘汰了。由于目前IE6不能支持有些标准的CSS,需要用微软特有的CSS来修复这些BUG.而且现在随着浏览器层出不穷,要是页面能够适应尽量多的浏览器成为一个课题。 但是随着CSS标准的进一步完善,浏览器将最终都会遵循这个标准,到时候写DIV+CSS布局的页 面就不那么麻烦了。

    但是现在,我们还是需要处理CSS在不同浏览器下的兼容性。一下是一个网友写的CSS兼容技巧,值得大家参考。

    CSS兼容技巧

      1 FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.

                可用important解决

      2 居中问题.

        1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过vertical-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 . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)

      6 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.

      7 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

    针对firefox ie6 ie7的css样式

      现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,

      但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针

      对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。

      现在写一个CSS可以这样:

      #1 { color: #333; } /* Moz */

      * html #1 { color: #666; } /* IE6*/

      *+html #1 { color: #999; } /* IE7*/

      那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。

    css布局中的居中问题

      主要的样式定义如下:

      body {TEXT-ALIGN: center;}

      #center { MARGIN-RIGHT: auto;MARGIN-LEFT: auto; }

      说明:

      首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。

      但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

      需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,

      只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

    盒模型不同解释

      #box{ width:600px; //for ie6.0-w/idth:500px; //for ff+ie6.0}

      #box{ width:600px!important //forff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

    浮动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不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,

      正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。

      比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:

      #box{ width: 80px; height:35px;}html>body #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的判断来实现最小宽度。

    清除浮动

      .hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}

      或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,

      所 以并不影响到IE/WIN浏览器。这种的最麻烦的……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}

    DIV浮动IE文本产生3象素的bug

      左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.

      #box{ float:left;width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{margin-right:-3px; //这句是关键}

      HTML代码

    属性选择器(这个不能算是兼容,是隐藏css的一个bug)

      p[id]{}div[id]{}

      这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

      属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

    IE捉迷藏的问题

      当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。

      有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。

      解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

    高度不适应

      高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用

      margin 或paddign时。

      例:

           p对象中的内容

      CSS:#box{background-color:#eee; }

      #box p {margin-top:20px;margin-bottom: 20px; text-align:center; }

      解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

     

    一、超链接点击过后hover样式就不出现的问题?

    被点击访问过的超链接样式不再具有hover和active样式了,解决方法是改变CSS属性的排列顺序: L-V-H-A

    二、IE6的margin双倍边距bug问题

    例如:

     


    <style type="text/css"> 
        body {margin:0;} 
        div {float:left; margin-left:10px; width:200px; height:200px; border:1px solid red;} 
    </style> 
     

     

    浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline;

    三、为什么中火狐浏览器下文本无法撑开容器的高度?

    标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:

     

    div { height:auto!important; height:200px; min-height:200px; }

     

    四、为什么web标准中无法设置IE浏览器滚动条颜色了?

    原来样式设置:

     


    <style type="text/css"> 
        body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; } 
    </style>
     

     

    解决办法是将body换成html

    五、如何定义1px左右高度的容器?

    IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

    六、怎么样才能让层显示在FLASH之上呢?

    解决的办法是给FLASH设置透明:

     

    <a href="http://www.chinaz.com/">:</a> 
    <pre lang="html" line="1"> 
    <param name="wmode" value="transparent" />

    七、怎样使一个div层居中于浏览器中?

     


    <style type="text/css"> 
    <!-- 
    div { 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin:-100px 0 0 -100px; 
    width:200px; 
    height:200px; 
    border:1px solid red; 

    --> 
    </style> 
     

     

    这里使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

    八、firefox浏览器中嵌套div标签的居中问题的解决方法

    假定有如下情况:

     


    <div id="a"> 
    <div id="b"> </div> 
    </div>
     

     

    如果要实现b在a中居中放置,一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切正常;但是在Firefox中b却会是居左的。

    解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为:margin: 0 auto;

     

    浏览器的内核

    Mozilla Firefox ( Gecko )

    Internet Explorer ( Trident )

    Opera ( Presto )

    Safari ( WebKit )

    Google Chrome ( WebKit )

    腾讯TT、世界之窗、360浏览器、遨游浏览器都是给IE加了个外壳,不过如果电脑上装的是ie8的话,这些浏览器还是调用ie7的内核。搜狗浏览器比较特殊,它有两种浏览模式:一是兼容模式,该模式使用IE内核;二是高速模式,该模式使用WebKit内核。解决ie7、ie8兼容性最好的办法是在head标签中加入meta 类型<metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE7" />,只要IE8一读到这个标签,它就会自动启动IE7兼容模式

    CSSHack

    解决浏览器兼容性问题的主要方法是CSS hack。由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。

    CSS Hack的原理是什么

    由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。等等

    各浏览器CSS hack兼容表:

     

    IE6

    IE7

    IE8

    Firefox

    Opera

    Safari

    !important

     

    Y

     Y

    Y

     Y

    _

    Y

     

     

     

     

     

    *

    Y

    Y

     

     

     

     

    *+

     

    Y

     

     

     

     

    \9

    Y

    Y

    Y

     

     

     

    \0

     

     

    Y

     

     

     

    nth-of-type(1)

     

     

     

     

    Y

    Y

    如何解决浏览器的兼容性

    在head标签中加入meta 类型<meta http-equiv="X-UA-Compatible"content="IE=EmulateIE7" />,这样就解决了ie7、ie8兼容问题。现在剩下ie6、ie7、Firefox、Chrome(Safari与Chrome使用同一内核)、Opera这几种浏览器的兼容性问题,我们需要使用CSS Hack来解决该问题。代码如下所示:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>

    <head>

    <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />

    <meta http-equiv="X-UA-Compatible"content="IE=EmulateIE7" />

    <title>浏览器兼容性问题</title>

    <style type="text/css">

    .t1

    {

           color:#000000; /*所有浏览器都支持 此处填写Firefox的css*/

           *color:#0000FF;/* ie6 id7 支持此处填写ie7的css*/

           _color:#66CCCC;/* ie6支持  此处填写ie6的css*/

    }

    @media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0)

    { .t1{color:#9900FF}} /* oprea支持  此处填写oprea的css*/

    @media screen and (-webkit-min-device-pixel-ratio:0)

    {

    .t1{color:#336600}/* Chrome、Safari支持  此处填写Chrome的css*/

    }

    </style>

    </head>

    <body>

    <div class="t1">ff、ie8、ie7、ie6、oprea、Safari兼容性css 书写模式<br>

    .t1{

           color:#000000; /*所有浏览器都支持 此处填写Firefox的css**/<br>

           *color:#0000FF;/* ie6 id7 支持此处填写ie7的css*/<br>

           _color:#66CCCC;/* ie6支持  此处填写ie6的css*/<br>

    }<br>

    /* oprea支持此处填写oprea的css*/<br>

    @media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0)<br>

    { .t1{color:#CC66FF}}<br>

    /* Chrome、Safari支持 此处填写Chrome的css*/<br>

    @media screen and (-webkit-min-device-pixel-ratio:0)

    {

    .t1{color:#336600}}

    }

    </div>

    </div>

    </body>

    </html>

    常见的浏览器兼容问题

    Css样式是与DOCTYPE引入的W3C//DTD有关的,不同的dtd对css的解析也不同,我们现在统一使用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    css兼容问题:

     

    1. 默认的内外边距不同

    问题:

    各个浏览器默认的内外边距不同

    解决:

    *{margin:0;padding:0;}

     

    2. 水平居中的问题

    问题:

    设置 text-align: center  

    ie6-7文本居中,嵌套的块元素也会居中

    ff /opera /safari /ie8文本会居中,嵌套块不会居中

    解决:

    块元素设置

    1、margin-left:auto;margin-right:auto

    2、margin:0 auto;

    3、<div align=”center”></div>

    3. 垂直居中的问题

    问题:

    在浏览器中 想要垂直居中,设置vertical-align:middle; 不起作用。例如:ie6下文本与文本输入框对不齐,需设置vertical-align:middle,但是文本框的内容不会垂直居中

    解决:

    给容器设置一个与其高度相同的行高

    line-height:与容器的height一样

    4. 关于高度问题

    问题:

    如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。

    如果设定了高度,内容过多时,ie6下会自动增加高度、其他浏览器会超出边框

    解决:

    1.设置overflow:hidden;

    2.高度自增height:auto!important;height:100px; 

     

    5. IE6 默认的div高度

    问题:

    ie6默认div高度为一个字体显示的高度,所在ie6下div的高度大于等于一个字的高度,因此在ie6下定义高度为1px的容器,显示的是一个字体的高度

    解决:

    为这个容器设置下列属性之一

    1、设置overflow:hidden;

    2、设置line-height:1px;

    3、设置zoom:0.08

     

    6. IE6 最小高度(宽度)的问题

    问题:

    ie6不支持min-height、min-width属性,默认height是最小高度,width是最小宽度。

    解决:

        使用ie6不支持但其余浏览器支持的属性!important。

    设置属性min-height:200px; height:auto !important;height:200px; 

     

    7. td高度的问题

    问题:

    table中td的宽度都不包含border的宽度,但是oprea和ff中td的高度包含了border的高度

    解决:

           设置line-height和height一样。在ie中如果td中的没有内容,那么border将不会显示

    8. div嵌套p时,出现空白行

    问题:

    div中显示<p>文本</p>,ff、oprea、Chrome:top和bottom都会出现空白行,但是在ie下不会出现空白行。

    解决:

    设置p的margin:0px,再设置div的padding-top和padding-bottom

    9. IE6-7图片下面有空隙的问题

    问题:

    块元素中含有图片时,ie6-7中会出现图片下有空隙

    解决: 

    1、在源代码中让</div>和<img>在同一行

    2、将图片转换为块级对象display:block;

    3、设置图片的垂直对齐方式 vertical-align:top/middle/bottom

    4、改变父对象的属性,如果父对象的宽、高固定,图片大小随父对象而定,那么可以对父元素设置:overflow:hidden;

    5、设置图片的浮动属性  float:left;

    10. IE6双倍边距的问题

    问题:

    ie6中设置浮动,同时又设置margin时,会出现双倍边距的问题

    float:left;width:100px;margin:0 100px;

    解决:

           设置display:inline;

     

    11. IE6 weidth为奇数,右边多出1px的问题

    问题:

    父级元素采用相对定位,且宽度设置为奇数时,子元素采用绝对定位,在ie6中会出现右侧多出1像素

    解决:

    将宽度的奇数值改成偶数

     

    12. IE6两个层之间3px的问题

    问题:

           左边层采用浮动,右边没有采用浮动,这时在ie6中两层之间就会产生3像素的间距

    解决:

    1、右边层也采用浮动  float

    2、左边层添加属性  margin-right:-3px;

     

    13. IE6 子元素绝对定位的问题

    问题:

           父级元素使用padding后,子元素使用绝对定位,不能精确定位

    解决:

           在子元素中设置 _left:-20px; _top:-1px;

     

    14. 显示手型cursor:hand

    问题:

           ie6/7/8、opera      都支持  但是safari 、 ff 不支持

    解决:

    写成 cursor:pointer;  (所有浏览器都能识别)  

     

    15. IE6-7 line-height失效的问题

    问题:

           在ie中img与文字放一起时, line-height不起作用 

    解决:

    都设置成float

    16. td自动换行的问题

    问题:

    Table宽度固定,td自动换行

    解决:

    设置Table的table-layout:fixed,td的word-wrap:break-word

    17. 子容器浮动后,父容器扩展问题

    问题:

    子容器都float以后,父容器没有设定高度,父容器将不会扩展

    解决:

    只需要添加一个clear:both的div,代码如下:

    <div style="border:1px solid#333;width:204px">

        <divstyle="width:100px;border:1px solid #333; float:left; ">子容器a</div>

        <divstyle="width:100px;border:1px solid #333; float:left;">子容器b</div>

        <divstyle="clear:both"></div>

    </div>

    18. 透明png图片会带背景色

    问题:

    在ie6下透明的png图片会带一个背景色

    解决:

    background-image: url(icon_home.png);/* 其他浏览器 */

    background-repeat: no-repeat;

    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png');/* IE6 */

    _background-image: none; /* IE6 */

    19. list-style-position默认值的问题

    问题:

    ie下list-style-position默认为inside,  firefox默认为outside

    解决:

    css中指定为outside即可解决兼容性问题

     

    20. list-style-image准确定位的问题

    问题:

           li前设置图片时,图片与其后的文字对齐问题

    解决:

    1、采用背景定位 和 字符缩进的方法

    background:url() no-repeat left center;text-index:16px;

    2、采用相对定位方法

    li 设置list-style:url();

    li的子元素position:relative;top:-5px;

    21. ul标签默认值的问题

    问题:

           ul标签在ff中默认是有padding值的,而在ie中只有margin有值

    解决:

           定义ul{margin:0;padding:0;}就能解决大部分问题

    22. IE中li指定高度后,出现排版错误

    问题:

    在ie下如果为li指定高度可能会出现排版错位

    解决:

           设置line-height

    23. ul或li浮动后,显示在div外

    问题:

    div中的ul或li设置float以后,都不在div中

    解决:

    必须在ul标签后加<divstyle="clear:both"></div>来闭合外层div

    24. ul浮动后,margin变大

    问题:

    ul设置 float后,在ie中margin将变大

    解决:

    设置ul的display:inline,li的list-style-position:outside

    25. li浮动后,margin变大

    问题:

    li设置 float后,在ie中margin将变大

    解决:

    设置li的display:inline

    26. 嵌套使用ul、li的问题

    问题:

    ie的bug,嵌套使用ul、li时,里层的li设置float以后,外层li不设置float, 里面的ul顶部和它外面的li总是有一段间距

    解决:

    设置里面的ul的zoom:1

     

    27. IE6-7 li底部有3px的问题

    问题:

           这个bug产生的充要条件是li的子元素浮动并且li设置了以下CSS属性之一:width、height、zoom、padding-top、padding-bottom、margin-top、margin-bottom。

    解决:

    1、div设置clear:left|both,这时li不能设置width、height、zoom。

    2、li设置float:left,这时li可以设置width、height、zoom。

    3、li设置clear:left|both,这时li不能设置width、height、zoom。

    4、IE6/IE7的这个Bug可以通过给li中的div设置vertical-align:top|middle|bottom解决。

     

    28. IE6 垂直列表间隙的问题

    问题:

           li中有a且设置display:block时,ie6中列表间会出现空隙

    解决:

    1、li中加display:inline;

    2、li使用float  然后 clear:both;

    3、给包含的文本末尾添加一个空格

    4、设置width

     

    29. IE6 列表背景颜色失效的问题

    问题:

    当父元素设置position:relative;时,在ie6中第一个ul、ol、dl的背景颜色失效

    解决:

           ul、ol、dl 都设置为position:relative;

     

    30. IE6-7 列表背景颜色失效的问题2

    问题:

    做横向导航栏时,ul设置为float且有背景色,li设置为float。ie6-7背景颜色失效

    解决:

    很多ie的bug都可以通过触发layout来解决 ul添加属性

    1、height:1%;

    2、float:left;

    3、zoom:1;

     

    31. 列表不能换行的问题

    问题:

           li设置为浮动,后面的li紧随其后,不能换行

    解决:

    1、为这个ul定义合适的宽高

    2、给包含这个ul 的父div定义合适的宽高。

     

    32. li中的内容以省略号显示

    问题:

    li中内容超过长度时,想以省略号显示, 此方法适用于ie6-7-8、opera、safari浏览器 

    ff浏览器不支持

    解决:

    li{width:200px;white-space:nowrap;text-overflow:ellipsis;

    -o-text-overflow:ellipsis; overflow: hidden; }

     

    33. 超链接访问过后hover样式不出现的问题

    问题:

           点击超链接后,hover、active样式没有效果

    解决:

           改变CSS属性的排列顺序: L-V-H-A 

     

    34. 禁用中文输入法的问题

    问题:

           不能在输入框中输入汉字

    解决:

    只在ie系列 和ff中有效

    ime-mode:disabled    (但可以粘贴)

    禁用粘贴:

    οnpaste="return false"

     

    35. 除去滚动条的问题

    问题:

           隐藏滚动条

    解决:

    1、只有ie6-7支持<bodyscroll="no">

    2、除ie6-7不支持 body{overflow:hidden}

    3、所有浏览器 html{overflow:hidden}

     

    36. 让层显示在FLASH之上

    问题:

           想让层的内容显示在flash上

    解决:

    把FLASH设置透明

    1、<param name=" wmode "value="transparent" />

    2、<param name="wmode"value="opaque"/>

     

    37. 去除链接虚线边框的问题

    问题:

    当点击超链接后,ie6/7/8  ff会出现虚线边框 ,而opera、safari没有虚线边框

    解决:

    ie6/7中 设置为a { blr:expression(this.onFocus=this.blur()) }

    ie8 和 ff 都不支持expression  在ie8 、ff中设置为 :focus { outline: none; }

     

    38. css滤镜的问题

    问题:

        css滤镜只在ie中有效,Firefox, Safari(WebKit), Opera只能够设置透明,它们不支持滤镜filter,无法实现图片切换中间变换的效果,只能通过透明度来设置。

    解决:

           ff中设置透明度   -moz-opacity:0.10; opacity:0.6;

    ie中只设置filter:alpha(opacity=50); 时,ie6-7失效,还要设置

    1、zoom:1;  2、width:100%;

     

    39. IE6背景闪烁的问题

    问题:

           链接、按钮用CSSsprites作为背景,在ie6下会有背景图闪烁的现象。原因是:IE6没有将背景图缓存,每次触发hover的时候都会重新加载

    解决:

           可以用JavaScript设置ie6缓存这些图片:

    document.execCommand("BackgroundImageCache",false,true);

     

    40. 出现重复文字的问题

    问题:

    <div style="width:400px">

      <divstyle="float:left"></div>

      <!– _ –>

      <div style="float:right;width:400px">↓这就是多出来的那只猪</div>

    </div>

    解决:

    1、  改变结构,不出现【一个容器包含2两个具有“float”样式的子容器】的结构。

    2、减小第二个容器的宽度,使父容器宽度减去第二个容器宽度的值大于3

    3、去掉所有的注释。

    4、修正注释的写法。<!--[if !IE]>这里是注释内容<![endif]-->

    5、在第二个容器后面加一个或者多个<divstyle="clear"></div>来解决。

    41. ff、chrome绝对定位无效

    问题:

    在IE给td设置position:relative,然后给它包含的一个容器使用position:absolute进行定位是有效的,但在FF和Chrome下却不可以。

    解决:

    设置td的display:block。

     

    42. IE6 绝对定位的问题

    问题:

    <div style="position:relative;border:1px solidorange;text-align:center;">

    <div style="position:absolute;top:0;left:0;

    background:#CCC;">dovapour</div>

    <a href="#" title="vapour的blog">内容</a>

    </div>

    解决:

    left的定位错误问题

    1、给父层设置zoom:1触发layout。

    2、给父层设置宽度width

     

    bottom的定位错误问题

    1、给父层设置zoom:1触发layout。

    2、给父层设置高度height

     

    43. 子容器宽度大于父容器宽度时,内容超出

    问题:

    子DIV的宽度和父DIV的宽度都已经定义,在IE6中如果其子DIV的宽度大于父DIV的宽度,父DIV的宽度将会被扩展,在其他浏览器中父DIV的宽度将不会扩展,子DIV将超出父DIV

    解决:

    设置overflow:hidden,子DIV将不会超出父DIV。

    44. float的div闭合的问题

    问题:

    例如:<#div id=”floatA” ><#div id=”floatB”><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移,而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)  

    这段代码在IE中毫无问题,问题出在其他浏览器中。原因是NOTfloatC并非float标签,必须将float标签 闭合。

    解决:

    在 <#div class=”floatB”> <#divclass=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会 产生异常。并且将clear这种样式定义为为如下即可:.clear{ clear:both;}

     

    45. 单选框、复选框与后面的文字对不齐

    问题:

         单选框、复选框与后面的文字对不齐。

    解决:

    .align{font-size:12px;}

    .align input{ display:block; float:left;}

    .align label{ display:block; float:left;padding-top:3px; *padding-top:5px;}


    需注意的问题:

     

    1. 设置padding后高度和宽带都会增加

    说明:

           除了ie5.5,其他所有浏览器中,设置padding以后高度和宽带都会增加

    2. 使用XHTML 1.0 Transitional后,div宽度

    说明:

           在使用XHTML 1.0Transitional以后div宽度都不包含border的宽度了,设置宽度的时候需要注意下。

    3. 外层相对定位,内层绝对定位

    说明:

    ie6下,外层div的postion: relative,并设置text-align,内层div的postion:absolute,这时内层的位置是相对于text-align而言的

    例如:

    <div style="position:relative;border:1px solidorange;text-align:center;zoom:1"> position:relative

    <divstyle="position:absolute;top:0;left:0;background:#CCC;">position:absolute</div>

    </div>

    4. &nbsp; 显示的大小不一致

    说明:

    默认字本显示问题,导致&nbsp;显示的大小不一致,在ie下比较小一点,其他的浏览器都一致,当你使用了&nbsp;造成问题时请注意。

    5. 边框重叠说明

    说明:

    为 table、td 都指定了边框后,然后使用border-collapse:collapse让边框重叠,可以看出在发生重叠时,Firefox是用 td 覆盖 table 的,而 IE 是用 table 覆盖 td 的。使用时候需要注意。

    6. 设置td padding的说明

    说明:

    设置td的padding以后高度和宽带都会增加,padding-left和padding-right的效果都一样增加了td的宽带,但是padding-top和padding-bottom的效果不一样。最好不要使用td的ding-top和padding-bottom

    7. ul设置的说明

    说明:

    ul一般设置:list-style-type:none;margin:0px;padding:0px;li一般设置:list-style-type:none;list-style-position:outside

    8. 使一个层垂直居中于浏览器中

    说明:

    使用百分比绝对定位,与外补丁负值的技巧,负值的大小为其自身宽度高度除以二

    div { 
    position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px;

    width:200px; height:200px; border:1px solid red; 
    }

     

    9. 万能 float 闭合

    说明:

    可以用这个解决多个div对齐时的间距不对, 将以下代码加入GlobalCSS 中,给需要闭合的div加上 class=”clearfix” 即可

    <style>
    /* 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 */
    </style>

    10. 触发layout

    说明:

    IE6中很多Bug都可以通过触发layout得到解决.下列的CSS属性或取值会让一个元素获得layout:        

    position:absolute 绝对定位元素的包含区块(containing block)就会经常在这一方面出问题

    float:left|right 由于layout元素的特性,浮动模型会有很多怪异的表现

    display:inline-block 当一个内联级别的元素需要layout的时候就往往符用到它,这也可能也是这个CSS属性的唯一效果----让某个元素有layout

    width: 除auto外的任何值

    height: 除auto外的任何值

    zoom: 除auto外的任何值

     

    11、如何使连续长字段自动换行

    ff最新版本 word-wrap:break-word;就可以了

    ff旧版本 还要使用javascript完成文字换行

    <style type="text/css">

    div {

           width:300px;

          word-wrap:break-word;

           border:1px solidred;

           }

    </style>

     

    <script type="text/javascript">

    function toBreakWord(intLen){

    var obj=document.getElementById("ff");

    var strContent=obj.innerHTML; 

    var strTemp="";

    while(strContent.length>intLen){

    strTemp+=strContent.substr(0,intLen)+"&#10;"; 

    strContent=strContent.substr(intLen,strContent.length); 

    }

    strTemp+="&#10;"+strContent;

    obj.innerHTML=strTemp;

    }

    if(document.getElementById  && !document.all)  toBreakWord(37)

     

    12、设置滚动条颜色 只对ie系列有效 在html中 而不是设置body

    <style type="text/css">

    html {

          scrollbar-face-color:#f6f6f6;

          scrollbar-highlight-color:#fff;

          scrollbar-shadow-color:#eeeeee;

          scrollbar-3dlight-color:#eeeeee;

          scrollbar-arrow-color:#000;

          scrollbar-track-color:#fff;

          scrollbar-darkshadow-color:#fff;

           }

    </style>

    IE不支持float:inherit overflow:hidden有2个用法,一个是隐藏溢出,另一个是清除浮动。

    <div>, <p>, <h1>, <form>, <ul>和 <li>是块元素的例子

    <span>, <a>, <label>, <input>,<img>, <strong> 和<em>是inline元素

    <body οncοntextmenu="return false"οndragstart="return false"  tstart="returnfalse"  scroll="auto">

    这行代码放在body中,去掉了页面鼠标右键快捷菜单,达到防止图片另存为的目的。


    javascript部分
    1. document.form.item 问题

    问题:
    代码中存在 document.formName.item("itemName") 这样的语句,不能在FF下运行
    解决方法:
    改用 document.formName.elements["elementName"]

    2. 集合类对象问题
    问题:
    代码中许多集合类对象取用时使用(),IE能接受,FF不能
    解决方法:
    改用 [] 作为下标运算,例:
    document.getElementsByName("inputName")(1) 改为document.getElementsByName("inputName")[1]

    3. window.event
    问题:
    使用 window.event 无法在FF上运行
    解决方法:
    FF的 event 只能在事件发生的现场使用,此问题暂无法解决。可以把 event 传到函数里变通解决:
    onMouseMove = "functionName(event)"
    function functionName (e) {
        e = e || window.event;
        ......
    }

    4. HTML对象的 id 作为对象名的问题
    问题:
    在IE中,HTML对象的 ID 可以作为 document 的下属对象变量名直接使用,在FF中不能
    解决方法:
    使用对象变量时全部用标准的 getElementById("idName")

    5. 用 idName 字符串取得对象的问题
    问题:
    在IE中,利用eval("idName") 可以取得 id 为 idName 的HTML对象,在FF中不能
    解决方法:
    用 getElementById("idName") 代替 eval("idName")

    6. 变量名与某HTML对象 id 相同的问题
    问题:
    在FF中,因为对象 id 不作为HTML对象的名称,所以可以使用与HTML对象 id 相同的变量名,IE中不能
    解决方法:
    在声明变量时,一律加上 var ,以避免歧义,这样在IE中亦可正常运行
    最好不要取与HTML对象 id 相同的变量名,以减少错误

    7. event.x 与 event.y 问题
    问题:
    在IE中,event 对象有x,y属性,FF中没有
    解决方法:
    在FF中,与 event.x 等效的是 event.pageX ,但event.pageX IE中没有
    故采用 event.clientX 代替 event.x ,在IE中也有这个变量
    event.clientX 与 event.pageX 有微妙的差别,就是滚动条
    要完全一样,可以这样:
    mX = event.x ? event.x : event.pageX;
    然后用 mX 代替 event.x

    8. 关于frame
    问题:
    在IE中可以用 window.testFrame 取得该frame,FF中不行
    解决方法:
    window.top.document.getElementById("testFrame").src = 'xx.htm'
    window.top.frameName.location = 'xx.htm'

    9. 取得元素的属性
    在FF中,自己定义的属性必须 getAttribute() 取得

    10. 在FF中没有parentElement,parement.children 而用 parentNode,parentNode.childNodes
    问题:
    childNodes 的下标的含义在IE和FF中不同,FF的 childNodes 中会插入空白文本节点
    解决方法:
    可以通过 node.getElementsByTagName() 来回避这个问题
    问题:
    当html中节点缺失时,IE和FF对 parentNode 的解释不同,例如:
    <form>
    <table>
    <input/>
    </table>
    </form>
    FF中 input.parentNode 的值为form,而IE中 input.parentNode 的值为空节点
    问题:
    FF中节点自己没有 removeNode 方法
    解决方法:
    必须使用如下方法 node.parentNode.removeChild(node)

    11. const 问题
    问题:
    在IE中不能使用 const 关键字
    解决方法:
    以 var 代替

    12. body 对象
    FF的 body 在 body 标签没有被浏览器完全读入之前就存在,而IE则必须在 body 完全被读入之后才存在
    这会产生在IE下,文档没有载入完时,在body上appendChild会出现空白页面的问题
    解决方法:
    一切在body上插入节点的动作,全部在onload后进行

    13. url encoding
    问题:
    一般FF无法识别js中的&
    解决方法:
    在js中如果书写url就直接写&不要写&

    14. nodeName 和 tagName 问题
    问题:
    在FF中,所有节点均有 nodeName 值,但 textNode 没有 tagName 值,在IE中,nodeName 的使用有问题
    解决方法:
    使用 tagName,但应检测其是否为空

    15. 元素属性
    IE下 input.type 属性为只读,但是FF下可以修改

    16. document.getElementsByName() 和document.all[name] 的问题
    问题:
    在IE中,getElementsByName()、document.all[name] 均不能用来取得 div 元素
    是否还有其它不能取的元素还不知道(这个问题还有争议,还在研究中)

    17. 调用子框架或者其它框架中的元素的问题
    在IE中,可以用如下方法来取得子元素中的值
    document.getElementById("frameName").(document.)elementName
    window.frames["frameName"].elementName
    在FF中则需要改成如下形式来执行,与IE兼容:
    window.frames["frameName"].contentWindow.document.elementName
    window.frames["frameName"].document.elementName

    18. 对象宽高赋值问题
    问题:
    FireFox中类似 obj.style.height = imgObj.height 的语句无效
    解决方法:
    统一使用 obj.style.height = imgObj.height + "px";
    19. innerText的问题
    问题:
    innerText 在IE中能正常工作,但是innerText 在FireFox中却不行
    解决方法:
    在非IE浏览器中使用textContent代替innerText


    20. event.srcElement和event.toElement问题
    问题:
    IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性
    解决方法:
    var source = e.target || e.srcElement;
    var target = e.relatedTarget || e.toElement;

    21. 禁止选取网页内容
    问题:
    FF需要用CSS禁止,IE用JS禁止
    解决方法:
    IE: obj.onselectstart = function() {return false;}
    FF: -moz-user-select:none;
    22. 捕获事件
    问题:
    FF没有setCapture()、releaseCapture()方法
    解决方法:
    IE:
    obj.setCapture(); 
    obj.releaseCapture();
    FF:
    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    if (!window.captureEvents) {
           o.setCapture();
    }else {
           window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    }
    if (!window.captureEvents) {
           o.releaseCapture();
    }else {
           window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    }

    展开全文
  • 浏览器兼容性问题和解决方案

    千次阅读 2020-10-24 11:18:26
        所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。 常见的浏览器内核     四种内核: Trident、Gecko、Blink、Webkit 类型 内核 ...

    简述

        所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。

    常见的浏览器内核(渲染引擎)

        四种内核: Trident、Gecko、Blink、Webkit

    浏览器 内核
    IE浏览器 Trident 内核,也成为 IE 内核
    Chrome浏览器 Webkit 内核,现在是 Blink 内核
    Firefox浏览器 Gecko 内核,俗称 Firefox 内核
    Safari浏览器 Webkit 内核
    Opera浏览器 最初是自己的 Presto 内核,后来加入谷歌大军,从Webkit又到了Blink内核
    360浏览器 Trident + Blink 双内核
    猎豹浏览器 Trident + Blink 双内核
    百度浏览器 Trident 内核
    QQ浏览器 Trident(兼容模式)+ Webkit(高速模式)

    CSS兼容性问题

        1. 不同浏览器的标签默认的外边距 ( margin ) 和内边距 ( padding ) 不同

        解决方案一: css 里增加通配符 * { margin: 0; padding: 0; }

        解决方案二: body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin: 0; padding: 0; }

        2. 在 IE6及以下版本中设置了 float,同时又设置 margin,就会出现双边距浮动问题

        问题描述:任何浮动的元素上的外边距加倍

        解决方案:在 float 的标签样式控制中加入 display: inline; 将其转化为行内属性

        3. IE6下默认有行高

        解决方案:overflow: hidden;font-size: 0;line-height: xx px;

        4. 图片默认有间距

        解决方案:使用 float 属性为 img 布局

        5. IE6及以下版本,不支持最小高度 min-height
    .
        问题描述:IE6不支持 min-height 属性。即使定义了元素高度,如果内容超过元素的高度,IE6在解析时,会自动延长元素的高度

        解决方案:利用 IE6 不识别 !important,给元素设置固定高度,并且设置元素高度自动。height: auto !important; height: 300px; min-height: 300px; IE7 及其其他浏览器都识别 !important,虽然定义了 height: 300px,但是 !important 的优先级最高。所以内容超过 300px 时,还是会自动延长。

        6. IE8及以下版本不支持 opacity

        解决方案:opacity: 0.5; filter: alpha(opacity = 50); -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(opacity = 80)”;

        7. IE6以下的 3 像素问题

        问题描述:两个相邻的 div 之间有3个像素的空隙,一个 div 使用了 float,而另一个没有使用产生的。

        解决方案一:对另一个 div 也使用 float

        解决方案二:给浮动的 div 添加属性 margin-right: –3px,但是这样写,在其他浏览器又会不正常,所以我们需要添加 IE6 的 hack,在属性 margin-right 前添加下划线 margin-right: –3px。( IE6 以及更低版本的 hack,是在属性前面添加下划线)

        8. 块级元素上下边距合并问题

        问题描述:当上下相邻元素都设置了 margin 边距时,margin 将取最大值,舍弃小值

        解决方案:可以给子元素添加一个父元素,并设置该父元素:overflow: hidden;

        9. IE9 以下浏览器不识别 HTML5 新增标签问题

        解决方案:

    <!--[if lt IE 9]>
     	<script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
    

        10. margin 塌陷问题

        问题描述:如果一个大盒子中包含一个小盒子, 给小盒子设置 margin-top 大盒子会一起向下平移

        解决方案一:给父盒子加一个边框 border: 1px solid black;

        解决方案二:给父盒子加 padding-top: xx px;

        解决方案三:给父盒子设置属性 overflow: hidden;

        解决方案四:给父盒子设置浮动 float: left;

        解决方案五:给父盒子设置为行内块 display: inline-block;

        11. 清除浮动

        问题描述:浮动元素撑不开父级容器

        解决方案一:额外标签法。在浮动的盒子内部最后,再放一个块级标签,在这个标签内使用 clear: both;

        解决方案二:使用 overflow 清除浮动。在父元素中添加一个属性 overflow: hidden;

        解决方案三:使用伪元素清除浮动。

    .clearfix::after {
    	content: "";      /* 伪元素必须给这个content='' */
        display: block;   /* 必须块级才能清除 */
        clear: both;      /* 核心代码 */
        /* 保证伪元素在页面中看不到 */
    	height:0;
        line-height:0;
    	visibility:hidden;
    }
    /* 兼容 IE 67 */
    .clearfix {
      *zoom: 1;
    }
    

        解决方案四:给父盒子设置高度

    IE属性过滤器(较为常用的hack方法)

    字符 例子 说明
    _ _height:100px; IE6可以识别
    * 、+ 、! *height:100px; IE6 / IE7可以识别
    \0/ height:100px\0/; IE8可以识别
    \9 height:100px\9; IE6、7、8、9、10可以识别

    浏览器CSS兼容前缀

    -o-transform: rotate(7deg);        // Opera
    -ms-transform: rotate(7deg);       // IE
    -moz-transform: rotate(7deg);      // Firefox
    -webkit-transform: rotate(7deg);   // Chrome
    transform: rotate(7deg);           // 统一标识语句
    

    JS兼容性问写法

        1. 获取网页宽和高的兼容性问题

    var winW = document.body.clientWidth || document.documentElement.clientWidth   // 网页可见区域宽
    var winH = document.body.clientHeight || document.documentElement.clientHeight // 网页可见区域宽
    // 以上为不包括边框的宽高,如果是 offsetWidth 或者 offsetHeight 的话包括边框
    
    var winWW = document.body.scrollWidth || document.documentElement.scrollWidth   // 整个网页的宽
    var winHH = document.body.scrollHeight || document.documentElement.scrollHeight // 整个网页的高
    
    var screenH = window.screen.height // 屏幕分辨率的高
    var screenW = window.screen.width  // 屏幕分辨率的宽
    var screenX = window.screenLeft    // 浏览器窗口相对于屏幕的x坐标(除了Firefox)
    var screenXX = window.screenX      // FireFox相对于屏幕的X坐标
    var screenY = window.screenTop     // 浏览器窗口相对于屏幕的y坐标(除了Firefox)
    var screenYY = window.screenY      // FireFox相对于屏幕的y坐标
    

        2. 获取滚动条距离的兼容性问题

    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop // 网页被卷去的高
    var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft // 网页左卷的距离
    
    

        3. 获取行外样式 currentStyle 和 getComputedStyle 的兼容性问题

    function getStyle(el, name){
        if(el.currentStyle) {
            // IE
            return el.currentStyle[name]
        } else {
            // Chrom, Firefox
    		return getComputedStyle(el, false)[name]
    	}
    }
    

        4. 用 “索引” 获取字符串每一项的兼容性问题

    var str = 'abcdefg'
    
    alert(str[0])  // 低版本的浏览器IE6, 7不兼容
    	
    alert(str.charAt(0))  // 兼容所有浏览器
    

        5. 使用 event 对象时的兼容性问题

    document.oncilck = function(ev) {
        var e = ev || window.event
        alert(e.clientX)
    }
    

        6. 阻止事件冒泡的兼容性问题

    document.oncilck = function(ev) {
        var e = ev || window.event
        if (e.stopPropagation) {
            e.stopPropagation()    // W3C标准
        } else {
        	e.cancelBubble = true  // IE..
        }
    }
    

        7. 阻止事件默认行为的兼容性问题

    document.oncilck = function(ev) {
        var e = ev || window.event
        if (e.preventDefault) {
            e.preventDefault()      // W3C标准
        } else {
        	e.returnValue = false   // IE..
        }
    }
    

        8. 获取事件目标对象的兼容性问题

    document.oncilck = function(ev) {
        var e = ev || window.event
        var target = e.target || e.srcElement         // 获取 target 的兼容写法,后面的为 IE
        var from = e.relatedTarget || e.formElement   // 鼠标来的地方,同样后面的为 IE...
        var to = e.relatedTarget || e.toElement       // 鼠标去的地方
    }
    

        9. 获取键盘按键码的兼容性问题

    document.onkeydown = function(ev) {
    	var e = ev || window.event
    	var code = e.keyCode || e.which || e.charCode
    	console.log(code)
    }
    

        10. 设置监听事件的兼容性问题

    // 设置监听事件
    function addEvent(el, type, fn) {        // 添加事件监听,三个参数分别为 对象、事件类型、事件处理函数,默认为 false
        if (el.addEventListener) {
            el.addEventListener(type, fn, false)    // 非IE
        } else {
            el.attachEvent('on' + type, fn)     // IE,这里已经加上on,传参的时候注意不要重复加了
        }
    }
    // 删除事件监听
    function removeEvent(el, type, fn) {  
        if (el.removeEventListener) {
            el.removeEventListener(type, fn, false)    // 非IE
        } else { 
            el.detachEvent('on' + type, fn)    // IE,这里已经加上on,传参的时候注意不要重复加了
        }
    }
    

        11. 获取DOM节点的兼容性问题

    // DOM节点相关,主要兼容IE 6 7 8
    
    // 获取下一个兄弟节点
    function nextnode(el) {
        if (el.nextElementSibling) {
            return el.nextElementSibling  // 非IE6 7 8 支持
        } else{
            return el.nextSibling  // IE6 7 8 支持
        }
    }
    // 获取上一个兄弟节点
    function prenode(el) {
        if (el.previousElementSibling) {
            return el.previousElementSibling   // 非IE6 7 8 支持
        } else{
            return el.previousSibling     // IE6 7 8 支持
        }
    }
    // 获取第一个子节点
    function firstnode(el) {
        if (el.firstElementChild) {
            return el.firstElementChild   // 非IE6 7 8 支持
        } else{
            return el.firstChild    // IE6 7 8 支持
        }
    }
    // 获取最后一个子节点
    function lastnode(el) {
        if (el.lastElementChild) {
            return el.lastElementChild    // 非IE6 7 8 支持
        } else{
            return el.lastChild     // IE6 7 8 支持
        }
    }
    

        12. 监听鼠标的滑轮滚动事件的兼容性问题

    // 给页面绑定鼠标滑轮滚动事件
    var scrollFunc = function(e) {
    	var e = e || window.event
        if (e.wheelDelta) {     // 判断浏览器 IE, Chrome滑轮事件
           	// 当滑轮向上滚动时
    	    if (e.wheelDelta > 0) {
    		    console.log("滑轮向上滚动")
    		    console.log(e.wheelDelta)
    	    }
    	    // 当滑轮向下滚动时
    	    if (e.wheelDelta < 0) {
    	        console.log("滑轮向下滚动")
    	        console.log(e.wheelDelta)
    	    }
        } else if (e.detail) {   // Firefox滑轮事件
        	// 当滑轮向上滚动时
    	    if (e.detail> 0) {  
    		    console.log("滑轮向上滚动")
    		    console.log(e.detail)
    	    }
    	    // 当滑轮向下滚动时
    	    if (e.detail < 0) { 
    			console.log("滑轮向下滚动")
    			console.log(e.detail)
    	    }
        }
    }
    
    // Firefox 使用 DOMMouseScroll 绑定滑轮事件
    if(document.addEventListener) {
    	document.addEventListener('DOMMouseScroll', scrollFunc, false)
    }
    // W3C标准   IE/Opera/Chrome 
    window.onmousewheel = document.onmousewheel = scrollFunc
    
    展开全文
  • 兼容性

    2020-04-09 17:13:12
    1.兼容内核: -moz-:代表FireFox浏览器私有属性 -ms-:代表IE浏览器私有属性 -webkit-:代表safari、chrome浏览器私有属性 -o-:代表opera浏览器私有属性 2.一些属性的兼容 1>event||window.event 2>e....

    1.兼容内核:
    -moz-:代表FireFox浏览器私有属性
    -ms-:代表IE浏览器私有属性
    -webkit-:代表safari、chrome浏览器私有属性
    -o-:代表opera浏览器私有属性

    2.一些属性的兼容
    1>event||window.event
    2>e.cancelBubble=true||e.stopPropagation()
    3>box.currentStyle.width||window.getComputedStyle(box,null).width;
    4>document.body||document.documentElement.scrollTop;
    5>addEventListener(“click”,function(){},false)||attachEvent(“onclick”,function(){})
    6>removeEventListener(“click”,function(){},false)||detachEvent(“onclick”,function(){})
    7>e.preventDefault?e.preventDefault()e.returnValue=false;

    展开全文
  • 软硬件兼容性问题学习笔记

    千次阅读 2017-04-14 09:58:37
    软硬件兼容性问题学习笔记    声明:本文为博主学习时的摘录,部分内容来源于网络,如有侵权,请联系博主删除,在此感谢分享这些内容的原作者,Helping each other, make progress together    在进行电脑...
    软硬件兼容性问题学习笔记
          
           声明:本文为博主学习时的摘录,部分内容来源于网络,如有侵权,请联系博主删除,在此感谢分享这些内容的原作者,Helping each other, make progress together
           
           在进行电脑组装的时候,配件之间的兼容性问题,是我们不得不去考虑的。不同厂商生产的产品组合在一起,它们相互之间难免会发生“摩擦”,因此,合理的搭配硬件是我们的组装机能否正常运行的一大决定因素。

    一、硬件的兼容性问题:
    1,内存与主板不兼容

    A 现象:     

          内存与主板不兼容的故障较为常见,表现为昨天电脑还用的好好的,可是今天早晨一开机,即“嘀嘀”地叫个不停。只有打开机箱,把内存条取下来重新插一下就好了。注意:在拔插内存条时一定要拔掉主机和电源线,防止意外烧毁内存。这是故障轻的,严重的话,需要把几个内存插槽都擦拭好几遍,才能把机子点亮。可是用不了十天半个月,就又会再出现报警的情况。只要你打开机箱把内存插一下就又好了。你说机器有问题,只要点亮了,就是连续运行十天半个月的一点问题也没有。可老是报警这谁也受不了。这种情况就是典型的内存与主板不兼容。

    B 造成这种故障的原因有:

     ⑴ 内存条不规范,内存条有点薄。当内存插入内存插槽时,留有一定的缝隙。如果在使用过程中有振动或灰尘落入,就会造成内存接触不良,产生报警。

     ⑵ 内存条的金手指工艺差,金手指的表面镀金不良。在长时间的使用过程中,金手指表面的氧化层逐渐增厚,积累到一定程度后,就会致使内存接触不良,开机时内存报警。

     ⑶ 内存插槽质量低劣,簧片与内存条的金手指接触不实在,在使用过程中始终存在着隐患,在一定的时间就会点不亮,开机报警。

     ⑷ 再就是纯粹的不兼容情况:一款条子,在有的主板上用得好好的,但是到了这块主板上却经常死机,或者不能正常启动。这就是典型的不兼容情况。

    C 处理方案:
     ⑴ 用橡皮仔细地把内存条的金手指擦干净,重新插入插槽。
     ⑵ 用热熔胶把内存插槽两边的缝隙填平,防止在使用过程中继续氧化。
     ⑶ 如果使用一段时间以后,还出现报警,这时可先更换一下内存条,看在以后的使用过程中是否还出现报警。
     ⑷ 如果过一段时间以后还有内存报警出现,这时只有更换主板,才能彻底解决问题。
      对于内存条与主板因为技术问题不兼容的情况,只能更换其他品牌的内存条,当然也可以换主板。例如:KingMax的内存与磐英的主板不兼容,只要二者往一块合,就会出现蓝屏情况。

    2,键盘与主板不兼容
            键盘与主板不兼容的问题主要是键盘和鼠标的品质不好,其芯片的数据取样速度与主板的接收不一致,在使用过程中就会不定期的出现键盘错误。
    A 表现故障:
    ⑴ 不定期的检查不到键盘或鼠标;
    ⑵ 键盘或鼠标在使用过程中丢失;
    ⑶ 还有就是鼠标在使用过程中没有箭头指示,但是能够正常操作或箭头丢失;
    ⑸ 机器休眠后,用机器唤醒后,鼠标无法使用,只能重新启动电脑或者把鼠标拔下来再插上去。⑷ 有时候还会出现拖动鼠标时有图块伴随着鼠标箭移动。
    B 解决方案

    这种情况一般不是主板的问题,只要更换合格的键盘和鼠标就可以了。

    ,3,显卡与主板不兼容

    A 故障表现: 
    ⑴ 显卡制作工艺不规范,造成插入AGP插槽后,有短路情况出现,这时表现为加不上电。

    ⑵显卡工作有时正常,能够点亮显示器;有时却无规律的点不亮显示器。但是把显卡插在别的主板上使用却完全正常。对于这种情况只能更换显卡。 

    (3)电脑主机也工作正常,显示器的图像显示也正常,但就是会偶然无规律的出现图像花屏情况。 
    (4)只要使用这块显卡,系统就会工作不稳定,要么频繁死机,要么经常掉显卡驱动。对于这种情况也有可能是因为显卡的驱动程序设计上有缺陷,造成显卡工作不稳定,致使系统死机。 

    4,硬盘与主板不兼容

            这种情况不多,但也有,有的硬盘在这块主板上认得好好的,但是在另一块主板却死活也不认。比如原来的一二百兆的小硬盘,如果要从硬盘启动,必须在IDE1接口的主盘位置,才能正常启动,否则插上后可以读可以写,但就是不能启动。对于硬盘速度慢的问题,一般不属于兼容问题,而是设置或接线有误。如:把DMA66的线反接了;硬盘属性中的DMA功能没有打开;CMOS设置中的IDE通道没有设为自动,而是人为的设置为PIO4以下的传输方式;硬盘线过长,造成数据衰减过大,传输率下降;硬盘的电源接口有问题或开关电源功率不足,造成硬盘的供电电压不稳且偏低。这类问题的解决方法就是心细一点,仔细检查硬盘的相关设置。特别是DMA66的线反接时,数据传输率将下降一半。另外在使用数据线时,尽可能的使用最近的接口。

    5,声卡与主板不兼容

             这种情况主要是系统的设备太多,造成声卡的中断或地址与其他设备冲突,要么系统死机,要么不能正常启动,要么系统工作不稳定,或者是声卡装好了,调制解调器却没有了。这种情况的解决是在系统安装好以后,进入资源管理器,打开相应设备的属性,手动修改其冲突的地址或中断号,使其占用空闲的就可以了。可能这一操作会多次重启电脑才能完成。需要说明一点,同一个中断号,输入设备和输出设备可以共用一个。现在PC机的中断号总共16个,从0-15,但可用的只有十多个,因为计时器,实时时钟,键盘等要固定的占用几个,能分的IRQ号就没有几个了。

           不过因为声卡的做工不好,造成把声卡插入PCI插槽后,竟造成了主板加不上电的情况我倒遇到了一回。起初还认为声卡是坏的,谁知换了一块同型号的,还是同样的故障现象,但这块声卡插在其他型号的主板上是能够正常工作。最后只能更换其他型号的声卡才把该问题解决。

    6,网卡与主板不兼容

             网卡除了地址和中断冲突外,还有一种情况是网速慢,上网和下载的速度特别慢,甚至到了无法忍受的地步。这种情况也是因为冲突造成的,其原因可能是因为网卡做工的原因,与机箱内的某一部件造成了电磁干扰,影响了网络的数据传输速度。对于前一种情况,处理方法同声卡;对于后一种情况,最好是更换不同品牌的网卡进行测试。

    7,最新的BIOS与主板不兼容

           一般当我们的主板不认识新的CPU和其他新的部件时或不认容量硬盘时,或原来主板有一些小BUG时,我们可以到网上下载该主板最新的BIOS程序,刷新后就可以了。不过我却遇到了一例是金长城品牌机,配置是C433的,原来使用的是4.3G硬盘,后来想挂一个40G的大容量硬盘,但是原来的P6SET-ME主板就是不认。后来到网上查到,最新的1.2版的BIOS能够认到65G的大硬盘,就从网上下载,然后刷新。一切都非常顺利,启动正常,硬盘也认了,本以为问题就此解决。但是在系统安装好以后,装完声卡时才发现,只要点击鼠标,喇叭中就会不停传出“嘟嘟”声,无法去除。起初还以为是系统没有安装好或者是声卡的驱动有问题,但是始终没有解决问题。最好在比较前后两个BIOS代码内容时发现,二都除了系统代码部分不同外,ACPI模块的容量也稍有差异,于是把旧BIOS中的ACPI剥离出来,再添加到新的BIOS中,然后刷新BIOS芯片,再启动系统时,发现故障解决。这是一款典型的BIOS代码与主板冲突的问题。

    8,显示器与主板不兼容

             对于三星,LG显示器,在其OSD菜单时有一项信号电平设置,可以将显示器接受信号电平在0.7V和1.0V两者这间做先择。我们普遍使用的PC机的显卡输出的信号电平是0.7V模拟信号,如果把显示器的接受信号电平误设为1.0V时,这时显示器的整下图像偏黄色,偏暗。特别对于专业做图使用的显示器,对色温要求很高,因为这关系到实际的输出效果,因此在选用显示器时,一定要选用高端的显示器,并且要检查显示器输入信号与显卡的输出信号是否匹配。

    9,打印机与主板不兼容

         这种情况一般不容易出现,主要是主板输出的打印信号电平与打印机的接口电路不匹配,造成打印时出现错误,其中还有一种可能是打印数据线不合格或数据线过长,造成信号在传输过程中衰减过大。我在维修过程中,因为并行数据线造成打印不正常的故障遇到过很多次,特别是数据线的长度最好不要超过2米,否则可以会造成的一些奇怪的故障,打印速度非常慢,打印半页,打印乱码等。

           例:一客户购买的硕泰克主板,PII450CPU的兼容机和OKI8340C打印机,因客户对该打印机的打印效果不满意,认为打印的精度不高和打印直线不直,要更换STAR3200+打印机。但是把打印机更换后,打印时,却只能打印5行,然后就无法打印,走纸退出,无法继续打印。也怀疑数据线有问题,但更换后故障依旧。不过,再使用OKI8340C时,还是正常。

     注意:OKI8340C和STAR3200+打印机都兼容LQ1600K打印驱动,更换打印机时无需更换驱动程序。

    10,光驱与主板不兼容

            这种情况表现为当插上光驱后,计算机主机启动过程变慢,容易死机,蓝屏等情况,但只要去除光驱就一切正常。这种情况一般是光驱的电路有损坏,造成在数据传输时出现停顿或等待时间太长而死机。解决的方法是使系统最小化运行,然后把其他部件一样一样的加上去,当加到某一部件时出现了问题,那么这就是问题所在。

    11,主板与机箱不兼容

             这种情况实际上不能叫做兼容,主要是机箱的制作工艺差,不规范,造成安装主板时要么主板有形变以致主板与机壳相碰而短路,要么各种扩展卡与主板接触不良而出现其他故故障。我遇到过一次,只要把主板等部件放到机箱里,就经常出现死机和不能启动情况,同时只有把机箱平放时才能启动,只要把机箱立起来就根本不能启动。但是把主板空置

    12,电源与主板不兼容

     电源做为计算机的动力源泉,可是关键中的关键。不过,好多朋友们在购机时,总是把大把的MONEY花在CPU和内存上,在电源上却省之又省。到后来电脑经常的犯病,罢工,才知道是电源的错,才一气之下买了一个好电源。为什么不一步到位呢?

     计算机各部件对电源的稳定度要求很高,+12V,+5V的变化在10%之内,+3.3V的变化在5%之内。如果电源的输出电压变化超出了这个范围,有的部件就会出现奇怪地故障,有的干脆罢工,有的可能会彻底报废。

    使用就能够长时间开机,并且运行稳定。

    13,移动设备与USB接口不兼容

         其实这类故障不能归为不兼容,多数都是移动设备的耗电量太大,而USB接口的供电电流有限,造成移动设备不能正常使用所致。如果出现移动硬盘,USB接口的扫描仪或其他移动设备不能正常使用时,注意检查一下设备的工作状态指示灯是否正常,再检查驱动程序的安装是否正确,最后检查一下主板USB接口的供电是否由跳线控制。主板USB接口的供电最好使用主电源+5V供电。

           有时候还会出现同样一块移动硬盘在有的主机上能够使用,而在有的主机上却不能使用,在排除上述的原因后,可能是因为不同的主板USB供电的方法不一样,有的是直接供电,从+5V电源接口到USB接口之间没有加任何元件;有的却是使用三极管可控供电,能够提供完善的保护措施,但是供电电流被限制在500MA以内。

    14,耳麦与声卡或主板不兼容

     有时插上耳机后,发觉耳机的声音特别小,没办法正常使用,这有两种情况:

     ⑴ 耳机的阻抗

     我们正常使用的耳机都是8OHM阻抗的听筒,如果我们购买的是高阻耳机或者是其它特殊用途的耳机,这时插在电脑上就会觉得声音特别小,即使你把声音调到最大,也没有任何改善。这种情况是因为负载的输入阻抗与设备的输出阻抗不匹配造成的。

     ⑵ 主板上是否有功放块

     有的主板上不带功放块,只能提供信号给带功放的有源音箱使用。如果使用耳机时,会感到耳机的声音特别小,这时没有别的办法,只能使用有源设备来工作。

     15,软驱与机箱不兼容

          软驱不能读盘,这种情况我们经常遇到,一来是软盘的故障率太高,二来是软驱也老爱犯病。特别软驱,虽然已经到了末日,可还是有用武之地,装个网卡驱动,解个硬盘逻辑锁,做个加密磁盘,还有一些杀毒软件都还喜欢用软盘。可是软驱呢,特别娇气,安装的时候稍微有些不到位或过紧过松了,插入软盘时就不能正确到位,也就无法正常读盘了。我们在安装软驱时,最好用一张软盘检查一下,是否能够装入到位,是否能够正常读盘,是否能够正常出盒。在确定工作正常时再紧固螺丝,然后再读盘检测。

    二、软件的兼容性问题

    1,向上兼容

    在较低档计算机上编写的程序,可以在同一系列的较高档计算机上运行,或者在某一平台的较低版本环境中编写的程序可以在较高版本的环境中运行,都称为向上兼容,前者是硬件兼容,而后者是软件兼容,例如,基于Intel386的PC兼容机上所有的软件也可以运行在486或更高的机型上。向上兼容具有非常重要的意义,一些大型软件的开发,工作量极大,如这些软件都能做到兼容,则无需在其它机器上重新开发,就可节省庞大的人力和物力。

     2,向下兼容

    对于软件来说,向下兼容的意思是,较高版本的程序能顺利处理较低版本程序的数据。拿著名的动画制作软件 Flash 的两个版本 Flash 5 与 Flash MX 2004 来说,这两个版本虽然保存出来的文件都是 .fla,可是文件内容的结构有所不同。尽管如此,Flash MX 2004 仍然能处理 Flash 5 保存的 fla 文件,我们就说 FlashMX 2004 是向下兼容的。 另外一个常见的例子也可以帮助我们理解向下兼容的概念,Microsoft的Office 2007可以打开Office 2003的文件,反之却不可以,因此说Office这个软件是向下兼容的。 事实上,多数的计算机软件都是向下兼容的。但是必须说明的一点是,由于考虑实际应用,不一定所有版本高的软件都能接受版本低的软件输出的东西,例如假设有一种软件X,并假设已经有10.0 版本了,那么版本旧得已经没有什么人用的X Version 1.0 所输出的文件,就不太可能在10.0 版本中顺利读取。

    3,程序兼容性

         程序兼容性是 Windows中的一种模式,它使您能够运行为 Windows 的早期版本所编写的程序。为 Windows XP 编写的大多数程序也可运行于 Windows Vista 版本中,但一些旧版本的程序可能会运行不畅或根本无法运行。如果某个旧版本的程序无法正常运行,请启动程序兼容性向导模拟 Windows 的早期版本。

    Windows XP中兼容性的设置 

    Windows XP以其强大的自动化设置和稳定的性能获得电脑玩家喜爱而且成为首选操作系统。但在谈到Win XP时不少人会这样说:WinXP好是好,就是有些软件在其中运行不畅,Win XP的兼容性似乎成了一个问题。其实Win XP本身提供了一种兼容性的设置,我们解决应用程序或者游戏的兼容性问题时可采用运行程序兼容性向导和手动设置兼容性属性来解决。

     1、运行程序兼容性向导:如果你的软件在Win XP不能正常运行或者根本不能安装,你就可以使用程序兼容性向导,它可以帮助你选择和测试兼容性设置,提示你在何种模式下使用何种设置对程序进行测试。

         首先单击“开始”—“帮助和支持”,在查找框中输入“兼容硬件和软件”开始查找,在搜索结果中选择“使较旧的应用程序能够在windows xp上运行”。点击文中“程序兼容性向导”链接,点击“下一步”系统提示你选择如何查找要运行兼容性设置的程序,如果是属于无法安装的老程序,可以选择“我想使用在CD-ROM驱动其中的程序(U)”或者“我想手动定位程序(A)”,点击“下一步”在“键入到程序的快捷方式或可执行文件的路经(Y)”中直接定位安装文件;如果程序已经安装但无法正常使用时,可以选择“我想从程序列表中选择(H)”在程序列表中找到程序。再点击“下一步”,进入下一个窗口选择(包括Windows 95(5)、 Windows NT 4.0、 Windows98/WindowsMe 、Windows2000(2)等,用户可以根据自己的需要进行选择。然后点“下一步”。系统将对你设置的系统兼容性进行测试,测试完成后系统会打开程序并进入界面,你可以根据运行情况进行选择:运行正常选择第一项;运行不正常要尝试其他设置时选择第二项;不再进行测试时选择第三项。最后一步系统提示你“是否将信息发送到Microsoft”选择“是”与“否”即可完成设置。

    2、手动设置兼容性属性:在桌面上右键单击该程序的快捷方式图标。并在快捷菜单中选择“属性”命令,打开“属性”对话框,选择其中的“兼容性”选项卡。如果选中了“兼容模式”栏中的“用兼容模式运行这个程序”项,将在下面列表中列出在所有可以选择的兼容选项,选择其中一种,如“Windows 95”,然后确定即可。

    常见问题

    通过设置程序兼容性的方式可以让程序能够或者更好的运行,但是这种办法是临时性的,并不能真正解决问题。因为这些与Win XP不兼容的程序在运行中难免继续出现一些问题,比如有些功能不能正常使用等,不要怕费事,还是经常访问程序网站,以获得有关更新或其它解决问题等方面的信息,查看是否有更新的或修补的程序吧。

    应用程序兼容性

    除了Windows系统对程序的兼容性以外,应用程序对操作系统以及应用程序之间都存在兼容性问题。所谓兼容性问题,即应用程序在不同的环境中,是否会因接口、函数的不同而发生错误的问题。

    展开全文
  • 软件兼容性与软件兼容性测试

    万次阅读 2009-10-28 12:26:00
    软件兼容性与软件兼容性测试(1)什么是软件兼容性很多东西都可以和平共处,巧克力和花生就是一个很好的例子,如果你喜欢吃花生巧克力糖的话。但是,我们也知道水和油就不相容。在我们用心创建一个复杂的大 型应用...
  • 主流浏览器兼容性问题与解决方案

    千次阅读 2018-11-12 14:23:11
    主流浏览器兼容性问题与解决方案  所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站...
  • 兼容性列表

    千次阅读 2019-05-31 13:26:52
    表1源端服务器OS兼容性列表 OS类型 OS版本 位数 支持UEFI Windows Windows Server 2008 32/64 NO ...
  • 浏览器兼容性问题解决方案 · 总结

    万次阅读 多人点赞 2017-08-29 15:38:57
    浏览器兼容性问题解决方案 · 总结普及:浏览器的兼容性问题,往往是个别浏览器(没错,就是那个与众不同的浏览器)对于一些标准的定义不一致导致的。俗话说:没有IE就没有伤害。贴士:内容都是自己总结的,不免会...
  • 常见的浏览器兼容性问题总结

    万次阅读 多人点赞 2018-01-27 09:21:50
    1. 不同浏览器的标签默认外补丁margin和内补丁padding不同 发生概率:100% 解决方案:使用CSS通配符*,设置内外补丁为0 *{ margin: 0; padding: 0;} 2. 块属性标签float之后,又有横向的margin值,在IE6中显示...
  • 移动端 1. IOS移动端click事件300ms的延迟响应 ...这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,...
  • transform的兼容性写法

    万次阅读 2018-07-20 22:53:32
    个人github:https://github.com/qiilee 欢迎... transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: transl...
  • Pr2020系统兼容性报告(不支持的视频驱动程序)的一种解决方法 1.左键单击设置 2.在设置中输入“设备管理器 ” 3.双击打开后,再双击显示器适配器 4.右键单击Intel® HD Graphics 520,点击更新驱动程序 5.点击...
  • 问题描述刚装完win10系统,就开始装VS2013,却出现了之前从未遇到过的情况:(图片不是很符合,图片是安装的中文语言包) 百度了一下,主要解决办法由以下两种:...该方法亲测没有出现兼容性的错误,但是我遇到了其他
  • edge浏览器怎么设置兼容性视图

    万次阅读 2019-10-09 19:03:45
    1、打开edge浏览器之后,在地址栏输入:about:flags后回车。 2、在开发者中点击“使用Microsoft兼容性列表”的勾选,...再次开启网站,就不会再有兼容性提示。 3、也可以点击右上角的设置按钮,然后点击用IE...
  • css3 新属性的兼容性之--transform

    万次阅读 2017-06-13 11:18:33
    css3兼容性
  • 手机兼容性测试:
  • VUE2.0的浏览器兼容情况汇总

    万次阅读 2018-05-03 11:16:17
  • 手机APP测试如何进行兼容性测试?

    万次阅读 2018-08-30 15:25:48
    Android App兼容性测试是一个比较重要的App评价内容,实际上兼容性测试不仅仅和测试人员相关,在开发阶段就应当着重考虑,因为兼容性问题是除了实现App本身要求的功能后,必须要关注、而且至关重要的一个点。...
  • VMware硬件兼容性查询链接

    千次阅读 2017-11-14 14:47:21
    https://www.vmware.com/resources/compatibility/search.php
  • 前端常见的浏览器兼容性问题及解决方案

    万次阅读 多人点赞 2018-03-22 15:42:26
    市场上浏览器种类很多,不同浏览器的内核也不尽相同,所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎,内核更加倾向于说渲染引擎。常见的浏览器内核:常见的...
1 2 3 4 5 ... 20
收藏数 846,928
精华内容 338,771
关键字:

兼容性