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

10、去掉ie有默认最低高度：

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

二、其他兼容性问题：

1、input text在IE6与IE7中边框问题：

input text在IE6与IE7中用border:none边框并没有去掉（button类型的

input有效果，边框已被去掉）。

input｛border:none;｝/* IE8 火狐 chrome*/

input[type=text]{ border:0; }/* 在所有input中类型是text的隐藏边框，兼容 ie7 ff

chrome */

input{border:0;}/* 包括所有input，兼容 ie6 ie7 ff chrome */

border:none;与border:0;的区别体现有两点：一是理论上的性能差异；二是浏

览器兼容性的差异。

1.性能差异

【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。

【border:none;】把border设为“none”即没有，浏览器解析“none”时将

不作出渲染动作，即不会消耗内存值。

2.兼容性差异

【border:none;】当border为“none”时对IE6/7无效边框依然存在

【border:0;】当border为“0”时，所有浏览器都一致把边框隐藏

总结：

1. 对比border:0;与border:none;之间的区别在于有渲染和没渲染，感觉他们和

display:none;与visibility:hidden;的关系类似，而对于border属性的渲染性能

对比暂时没找测试的方法，虽然认为他们存在渲染性能上的差异但也只能说是理

论上。

2. 如何让border:none;实现全兼容？只需要在同一选择符上添加背景属性即可

3.对于border:0;与border:none;个人更向于使用,border:none;，因为

border:none;毕竟在性能消耗没有争议，而且兼容性可用背景属性解决不足以成

为障碍

2、ie6中a:hover的bug：

IE6不允许a:hover的属性与a:link的属性相同，如果a:hover 中没有样式的改变，hover就不会被触发，所以需要加一个属性来区别，不论a:hover里写入任

何属性，都可以使之恢复正常，最常见的是a:hover{zoom:1;}

3、ie6下z-index失效：

IE下z-index的bug 在IE浏览器中，定位元素的z-index层级是相对于各自的

父级容器，所以会导致z-index出现错误的表现。解决方法是给其父级元素定义

z-index。

4、谷歌浏览器兼容性问题：

当鼠标焦点在input、textarea这些元素上时，Chrome默认的会给它们加上黄

色的边框。

解决方法：其实这是css的效果，outline这个属性。设置outline: none;就会去掉。

三、

浏览器兼容性问题及解决方案

浏览器兼容新问题 W3C对标准的推进，Firefox，Chrome，Safari，Opera的出现，结束了IE雄霸天下的日子。 然而，这对开发者来说，是好事，也是坏事。 说它是好事，是因为浏览器厂商为了取得更多的市场份额，会促使各浏览器更符合W3C标准，而得到更好的兼容性，并且，不同浏览器的扩展功能(例如-moz，-webkit开头的样式)，对W3C标准也是个推进；说它是坏事，因为，多个浏览器同时存在，这些浏览器在处理一个相同的页面时，表现有时会有差异。这种差异可能很小，甚至不会被注意到；也可能很大，甚至造成在某个浏览器下无法正常浏览。我们把引起这些差异的问题统称为“浏览器兼容性问题”。而正是这些“浏览器兼容性问题”，无形中给我们的开发增加了不少难度。 从浏览器内核的角度来看，浏览器兼容性问题可分为以下三类： 1. 渲染相关：和样式相关的问题，即体现在布局效果上的问题。 2. 脚本相关：和脚本相关的问题，包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性，也属于这一类。 3. 其他类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。 例如下面的页面，是一个渲染相关的问题： 在各个浏览器中都表现的不同，这就属于兼容性问题。 造成浏览器兼容性问题的根本原因就是浏览器各浏览器使用了不同的内核，并且它们处理同一件事情的时候思路不同。 现今常见的浏览器及其排版引擎（又称渲染引擎）及脚本引擎，如下：

而造成浏览器兼容性问题的常见原因则是设计师写出了不规范的代码，不规范的代码会使不兼容现象更加突出。 例如： 不规则的嵌套： DIV 中直接嵌套LI 元素是不合标准的，LI 应该处于UL 内。此类问题常见的还有P 中嵌套DIV，TABLE等元素。 不规范的DOM接口和属性设置： 总之，人为的原因也占很大一部分。而人为造成兼容性问题的原因，除了粗心之外，大都源于浏览器bug 的存在，和开发者对标准的不了解。 比如，如果要做一个功能，功能是想让鼠标悬停在IMG 元素上方时，可以出现提示信息，经常针对IE 做开发的人，可能会使用IMG 元素的“alt” 属性，但其他浏览器中就是不给…alt? 属性面子。因为W3C 标准中规定要去做这件事的属性是”title“，大多浏览器符合标准，IE 不符合，这是IE 浏览器内核的问题；开发者不知道”title“ 才是正解，不遵循标准去写代码，是开发者的问题。所以，一个问题分两半，浏览器和开发者都有责任。 既然都有责任，就都有义务去解决兼容性问题。那么，从浏览器的角度来讲，它的厂商应该修复浏览器的bug和不合标准的地方，当某一天IE 的”alt“ 不能用于提示了，还有人用这个错误的属性去显示提示么？从开发者角度来讲，多了解标准，了解浏览器兼容性问题，就可以在开发的过程中，有效的避开兼容性问题，让你的页面在所有浏览器中畅通无阻。 废话少说，下面就讲讲如何有效的避免一些兼容性问题。 J AVA S CRIPT (4)

软件兼容性测试

软件兼容性测试 1软件兼容性与软件兼容性测试 兼容性问题，即应用程序在不同的环境中，是否会因接口、函数的不同而发生错误的问题。 1.1软件兼容性 软件兼容性是指某个软件能稳定地工作在某操作系统/平台之中，就说这个软件对这个操作系统/平台是兼容的，再就是在多任务操作系统中，几个同时运行的软件之间如果能稳定地工作，就说这几个软件之间的兼容性好，否则就是兼容性不好。 另一种情况是软件共享的数据，几个软件之间无需复杂的转换，即能方便地共享相互间的数据，也称为兼容。因此，软件兼容性是衡量软件好坏的一个重要指标。从这个意义上看,软件兼容性不良就是软件推广的最大阻碍，例如在微软历史上花费人力财力最多的Vista系统，发布了半年之久依然是叫好不叫座，据说原因之一是软件兼容性最为用户所诟病。 1.2软件兼容性测试 软件兼容性测试是指测试软件在特定的硬件产台上、不同的应用软件之间、不同的操作系统平台上、不同的网络等环境中是否能很好地运行的测试。简单的说，兼容性测试是指测试某新开发的软件在某一特定环境下与各种软件的协调性，软件之间能否很好的运作。例如，会不会有相互不良的影响，还有软件和硬件之间能否发挥很好的效率工作，会不会影响或导致系统的崩溃等。 1.3配置测试与软件兼容性测试 配置测试是指验证在不同的硬件配置和软件配置下，应用程序能否正常工作。配置测试的目的是保证软件在其相关的硬件上能够正常运行，而兼容性测试主要

是测试软件能否与不同的软件正确协作。 软件兼容性测试（Software Compatibility Testing）是指检查软件之间是否能够正确地进行交互和共享信息。其工作的目标是保证软件按照用户期望的方式进行交互。 2软件兼容性测试的内容 软件兼容性测试的主要内容： 1.操作系统/平台的兼容性 2.应用软件的兼容性，例如framework、flash等 3.浏览器之前的兼容性 4.数据库之间的兼容性 5.其他方面，例如操作系统语言、传输协议、代理服务器、防火墙、自身 产品集成 2.1操作系统/平台的兼容性 市场上有很多不同的操作系统类型，最常见的有Windows、Unix、Macintosh、Linux等。应用软件的最终用户究竟使用哪一种操作系统，取决于用户系统的配置。这样，就可能会发生兼容性问题，同一个软件可能在某些操作系统下能正常运行，但在另外的操作系统下可能会运行失败。因此,理想的软件应该具有平台无关性。 当然，有些软件只是针对某一系列的操作系统平台来开发的，不存在跨平台的需求。但同一操作系统也有多个版本，例如Windows系统也有不同的系列版本号，如Windows 2000 /XP/Vista等，他们之间可能也有许多不同的组件属性。因此，有些软件可能需要在不同操作系统平台上重新编译才可运行，有些软件需要重新开发或改动较大才能在不同平台运行。因此，在软件发布之前，需要在各种操作系统下对应用软件进行兼容性测试。 自行安装多种平台和模拟应用环境进行测试，但缺点是难以覆盖所有平台。一个软件产品的开发成功，不仅仅是编写完为使用者提供服务功能的程序而已，

浏览器兼容性常见问题

1.注释标签常用语法 1.1注释的注意事项

1.2出错条件 1.3注释中多个地方出错时

1.4两个出错的注释标签，其间的内容被视为注释的一部分 1.5解决方案 2.浏览器的字符编码 2.1问题描述 各浏览器对于字符编码别名支持的宽泛程度有差异，当指定了浏览器无法识别的字 符编码别名时，浏览器会以确定编码的优先级顺序采用设置的更低优先级的字符编码， 以此类推。而 Chrome Safari Opera 中对字符编码别名有着比其他浏览器更宽泛的支持。

2.2文档的字符编码顺序 针对如何确定一个文档的字符编码，用户代码必须遵守下面的优先级顺序（优先级由高至低）： （1）HTTP "Content-Type" 字段中的 "charset" 参数。 （2）META 声明中 "http-equiv" 为 "Content-Type" 对应的值中的 "charset" 的值。（3）元素的 charset 属性。 2.3实例1 上面是一段 PHP 代码，HTTP "Content-Type" 头字段设置了字符编码为 BIG5，页面中的 META 元素设置了字符编码为 UTF-8，页面本身的编码类型为 GB2312。页面执行时，通过脚本输出了当前浏览器所采用的字符编码类型。 这个动态页面在各浏览器中运行时均显示出了 BIG5，可见此时所有浏览器均遵照HTML4.01 规范所述，以更高优先级的 HTTP "Content-Type" 头字段的 "charset" 参数的值作为字符编码类型。

2.4各浏览器默认编码格式 上面页面中没有设定任何的字符编码信息，则各浏览器对于这个页面将使用各自的默认编码。页面自身的编码为 GB2312。 各浏览器中运行效果如下： 2.5实例2 上面的动态页面自身的编码为 BIG5，HTTP "Content-Type" 头字段设置了字符编码为 maccyrillic，页面中的 META 元素设置了字符编码为 b.i.g+5。 各浏览器中运行效果如下：

不同浏览器兼容报告

Shuo de ——中国金融数据及工具首席服务商 IE、FF、Safari、OP不同浏览器兼容报告 柯伯勋 2011-03-08 上海万得资讯科技有限公司 Shanghai Wind Information Co., Ltd. 地址: 上海浦东新区福山路33号建工大厦9楼 邮编Zip : 200120 电话T el : (8621)6886 2280 传真Fax : (8621)6886 2281 Email : sales@https://www.doczj.com/doc/ef1457238.html, 主页:https://www.doczj.com/doc/ef1457238.html,

1浏览器内核简介 浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“解释引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。 浏览器内核很多，如果加上所有的几乎没有什么人在用的非商业的免费内核，那么可能大约有10款以上甚至更多，不过通常我们比较常见的大约只有以下四种，下面先简单介绍一下。 1.1Trident： IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE8。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。此外，为了方便也有很多人直接简称其为IE内核（当然也不排除有部分人是因为不知道内核名称而只好如此说）。 由于IE本身的“垄断性”（虽然名义上IE并非垄断，但实际上，特别是从Windows 95年代一直到XP初期，就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位）而使得Trident内核的长期一家独大，微软很长时间都并没有更新Trident内核，这导致了两个后果——一是Trident内核曾经几乎与W3C标准脱节（2005年），二是Trident内核的大量Bug等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点，也有很多用户转向了其他浏览器，Firefox和Opera就是这个时候兴起的。非Trident内核浏览器的市场占有率大幅提高也致使许多网页开发人员开始注意网页标准和非IE浏览器的浏览效果问题。 1.2Gecko： Netscape6开始采用的内核，后来的Mozilla FireFox也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko内核的浏览器也很多，这也是Geckos内核虽然年轻但市场占有率能够迅速提高的重要原因。 事实上，Gecko引擎的由来跟IE不无关系，前面说过IE没有使用W3C的标准，这导致了微软内部一些开发人员的不满；他们与当时已经停止更新了的Netscape的一些员工一起创办了Mozilla，以当时的Mosaic 内核为基础重新编写内核，于是开发出了Geckos。不过事实上，Gecko 内核的浏览器仍然还是Firefox用户最多，所以有时也会被称为Firefox内核。此外Gecko也是一个跨平台内核，可以在Windows、BSD、Linux 和Mac OS X中使用。 1.3Presto： 目前Opera采用的内核，该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。 实际上这是一个动态内核，与前面几个内核的最大的区别就在脚本处理上，Presto有着天生的优势，页

网页兼容性测试

网页兼容性测试 Web兼容性测试主要是针对不同的操作系统平台，浏览器，以及分辨率进行的测试。由于用户浏览器的不同，往往都会使我们的网页发生页面样式错乱，图片无法显示等问题。因此我们就需要对Web网页进行兼容性测试。对于web应用，我们无法预计用户的客户端配置和运行环境。所以，做好兼容性测试是非常重要的。 1.1. 操作系统兼容性测试 常见的操作系统有Windows，Unix，Linux等，对于普通用户来讲，最常用的是Windows操作系统。Windows操作系统包括Windows XP，windows 2003，vista，Win2000/NT，Windows9x等等。 1.2. 浏览器兼容性测试 浏览器是Web系统中最核心的组成构件，来自不同厂家的浏览器对Javascript、ActiveX或不同的HTML规格有不同的支持，即使是同一厂家的浏览器，也存在不同的版本的问题。不同的浏览器对安全性和JAVA的设置也不一样。 使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，在一种浏览器下显示正常，在另一种下就乱了。 不同的浏览器对CSS解释不同。 常见的浏览器兼容性问题，主要表现在如下两方面； 1）页面显示 页面显示的美观性是Web应用程序中重要需求，不同浏览器上呈现给用户的同一个Web页面可能显示的不一样。这些差异性主要表现在对于页面元素的位置、大小、外观。如果在某款浏览器上显示不美观，就会成为一个问题，需要修改。 2）功能问题 Web软件中的功能性问题主要是不同浏览器对脚本的执行不一致，功能性问题极大的限制了用户对Web界面元素的使用。这类问题通常很难被发现，比如某个按钮可能显示正确但实际它是无法使用的，这个则需要用户真正的去使用它才能被发现。 3）现有解决方法 由于软件尽可能多的支持不同类型浏览器，近年来越来越多的成为一个趋势，因此测试的工作量也越来越大。而更多的方法是通过手工进行测试，如何减少工作量，当然想到的还是自动化。 在业内目前通过自动化的方法减少手工测试工作量，主要的过程如下： 1）录制手工操作 将手工操作过程在一个浏览器上通过软件的方式记录下来。记录的主要是鼠标与键盘的动作，同时对每一个操作后的结果，设置一个预期结果。 2）检查测试结果 根据上个步骤录制的脚本，在其他浏览器上进行回放（自动化操作），并比对实际结果与预期结果，如果一样则测试通过，否则测试失败。 上述自动化的主要问题在于： 1）录制时需要设置预期结果，存在额外的工作量。 2）页面变化是WEB软件开发中经常发生的，比如变化了界面显示的文字，移动存放的位置，都可能导致录制的脚本需要进行修改，脚本的维护工作量会比较大。 3）对于操作的结果检查，由于各个浏览器对于界面的展现各不相同，（比如字体的显示各不相同），因此结果可能是多种的，就会很容易产生展现的结果也是美观的，但被误报成测试失败的现象。 1.3. 分辨率兼容性测试

Windows系统下各浏览器兼容性

Windows系统下各浏览器常用CSS HACK汇总表 1. 此汇总表中测试浏览器的版本为： 微软系统自带：IE6、 IE7、IE8 火狐：Firefox 3.6.6 Safari：Safari 5.0 谷歌浏览器：Chrome 6.0.458.1 dev Opera浏览器：Opera 10.60 2. 其中，多数CSS hack是在selector{property:value;}基础上更改的。 selector代表CSS选择器，property代表CSS特性，value代表特性的值。 3. FF代表Firefox，Ch代表Chorme，Sa代表Safari，Op代表Opera 4. Q代表Quirks Mode，S代表Standards Mode。 5. Hack Type列的数字，指的是上面CSS hack的实现方式中的列表号。 1是指“利用浏览器对相同代码的解析和支持的不同实现的hack”，2是指以Firefox或Webkit特有的扩展样式实现的hack。

一定遵守CSS hack的三条原则。CSS hack是没有办法的时候才使用的解决兼容性问题的招术，是用兼容性问题去解决兼容性问题，无异于饮鸩止渴。切莫一有兼容性问题就使用，时刻记得改掉用CSS hack修补的问题。 IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例 1.区别IE和非IE浏览器CSS HACK代码 #divcss5{ background:blue; /*非IE 背景藍色*/ background:red \9; /*IE6、IE7、IE8背景紅色*/ } 2.区别IE6,IE7,IE8,FF CSS HACK 【区别符号】：「\9」、「*」、「_」 【示例】： #divcss5{ background:blue; /*Firefox 背景变蓝色*/ background:red \9; /*IE8 背景变红色*/ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。 3.区别IE6、IE7、Firefox (EXP 1) 【区别符号】：「*」、「_」 【示例】： #divcss5{ background:blue; /*Firefox背景变蓝色*/ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读

最全整理浏览器兼容性问题与解决方案样本

常用浏览器兼容性问题与解决方案所谓浏览器兼容性问题，是指由于不同浏览器对同一段代码有不同解析，导致页面显示效果不统一状况。在大多数状况下，咱们需求是，无论顾客用什么浏览器来查看咱们网站或者登陆咱们系统，都应当是统一显示效果。因此浏览器兼容性问题是前端开发人员经常会遇到和必要要解决问题。 在学习浏览器兼容性之前，我想把前端开发人员划分为两类： 第一类是精准按照设计图开发前端开发人员，可以说是精准到1px，她们很容易就会发现设计图局限性，并且在很少状况下会遇到浏览器兼容性问题，而这些问题往往都死浏览器bug，并且她们制作页面后期易维护，代码重用问题少，可以说是比较牢固放心代码。 第二类是基本按照设计图来开发前端开发人员，诸多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。某种效果实现也是重复调试得到，详细为什么浮现这种效果还模模糊糊，整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这样写还不知因此然。此类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一种浏览器。改来改去也毫无头绪。其实她们遇到兼容性问题大某些不应当归咎于浏览器，而是她们技术自身了。 文章重要针对是第一类，严谨型开发人员，因而这里重要从浏览器解析差别角度来分析兼容性问题。 浏览器兼容问题一：不同浏览器标签默认外补丁和内补丁不同 问题症状：随便写几种标签，不加样式控制状况下，各自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%

关于浏览器兼容性问题

关于浏览器兼容性问题 制作网页时总会遇到各种浏览器的兼容性问题，工作也有一段时间了，做了一点小总结希望分享给大家，共同进步。 1、float定位。 Float定位是css排版中的非常重要的手段，属性float值：left、right、none（默认值），当设定了元素向左或者向右浮动时，元素会向其父元素的左侧或右侧靠紧。 在用float的同时我们要注意到 （1）float元素的父元素不能指定clear属性。 这是因为MaeIE下如果对float的元素父元素使用clear属性，周围的float元素布局就会混乱。 （2）float元素无比知道那个width属性 很多浏览器在显示未指定width的float元素时会有bug，所以不管float元素的内容如何，一定要为其制定width属性。（注意：制定元素时尽量使用em而不是px）（3）float元素不能指定margin和padding的属性 ie在显示指定了margin和padding的float元素时有bug。你可以再float元素内部嵌套一个div来势之margin和padding，也可以使用hack方法为ie指定特定的值。 （4）float元素之核的宽度要小于100% 如果float元素的宽度和正好等于100%，为保证大多浏览器显示正常，要是宽度之和小于100 2、margin加倍的问题。 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决方案是在这个div里面加上display:inline; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ 3、ie6中莫名出现多余的字符 我遇到的现象是：ie6下有些问题，重复出现在第二行，就是某些段落或某些文字的末尾N个字符，他另起一行重复出现，在选选着重复出现的文字时，原有的文字也被选中 解决方法：很简单，在重复出现文字的末尾补N个 ；就可以。 4、ie7中正常，但ie8中不正常，div的位置position：absolute在ie8中不起作用 解决方法：设置html兼容ie7，在head下加 5、针对ie 6、ie 7、火狐浏览器 (1)Ie6 、FF对!important;测试正常 Ie7对!important;可以正确解释。 为了使他们都正常： #style1{color：#333；} FF正常显示#333； *html #style1{color：#666；} ie6显示#666 *+html #style1{color：#999；} ie7显示#999 *+html与*html是ie特有的标签，firefox暂不支持，而*+html又为ie7特有的标签。 注意：顺序不能错了。 (2)FF: 链接加边框和背景色，需设置display: block, 同时设置float: left 保证不换行。 参照menubar, 给 a 和menubar 设置高度是为了避免底边显示错位, 若不设height,

浏览器兼容性解决方案

所有浏览器通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7、FF 共用 height: 100px !important; 什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，在这种浏览器下显示正常，在另一种下就乱了，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。好吧，我服了行吧，那我就利用你们的不兼容各写一段css,让他们各执行各的，呵呵。 一、!important (功能有限) 随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.) 例如: #example { width: 100px !important; /* IE7+FF */ width: 200px; /* IE6 */ }

二、CSS HACK的方法(新手可以看看，高手就当路过吧) 首先需要知道的是： 所有浏览器通用 height: 100px; IE6 专用 _height: 100px; IE7 专用 *+height: 100px; IE6、IE7 共用 *height: 100px; IE7、FF 共用 height: 100px !important; 例如： #example { height:100px; } /* FF */ * html #example { height:200px; } /* IE6 */ *+html #example { height:300px; } /* IE7 */ 下面的这种方法比较简单 举几个例子： 1、IE6 - IE7+FF #example { height:100px; /* FF+IE7 */ _height:200px; /* IE6 */ } 其实这个用上面说的第一种方法也可以 #example { height:100px !important; /* FF+IE7 */ height:200px; /* IE6 */ } 2、IE6+IE7 - FF #example { height:100px; /* FF */ *height:200px; /* IE6+IE7 */ } 3、IE6+FF - IE7 #example { height:100px; /* IE6+FF */

浏览器兼容性bug

常见浏览器兼容性问题与解决方案 标签：前端开发浏览器兼容问题 所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 在学习浏览器兼容性之前，我想把前端开发人员划分为两类： 第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都死浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。 第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器，而是他们的技术本身了。 文章主要针对的是第一类，严谨型的开发人员，因此这里主要从浏览器解析差异的角度来分析兼容性问题。（相关文章推荐：主流浏览器CSS 3和HTML 5兼容清单） 浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 碰到频率:100% 解决方案：CSS里 *{margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

各种浏览器兼容问题列表

各种浏览器兼容问题列表 1、仅IE7与IE5.0可以识别 *+html select {…} 当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。 2、仅IE7可以识别 *+html select {…!important;} 当面临需要只针对IE7做样式的时候就可以采用这个HACK。 3、IE6及IE6以下识别 * html select {…} 这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。 4、html/**/ >bod y select {…} 这句与上一句的作用相同。 5、仅IE6不识别，屏蔽IE6 select { display /*屏蔽IE6*/:none;} 这里主要是通过CSS注释分开一个属性与值，注释在冒号前。 6、仅IE6与IE5不识别，屏蔽IE6与IE5 select/**/ { display /*IE6,IE5不识别*/:none;} 这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5 7、仅IE5不识别，屏蔽IE5 select/*IE5不识别*/ {…} 这一句是在上一句中去掉了属性区的注释。只有IE5不识别，IE5.5可以识别。 8、盒模型解决方法 selct {width:IE5.x宽度; voice-family :”\”}\”"; voice-family:inherit; width:正确宽度;} 盒模型的清除方法不是通过!important来处理的。这点要明确。 9、只有Opera识别 @media all and (min-width: 0px){ select {……} } 针对Opera浏览器做单独的设定。 以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样

div+css中常见的浏览器兼容性处理

在网站设计的时候，应该注意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的兼容.(注意写法.记得该声明位置需要提前.) 代码: 2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签. 代码: 注意: *+html 对IE7的兼容必须保证HTML顶部有如下声明： 代码: 二、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对， 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup] 将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix” 即可,屡试不爽. 代码: ********************************************************************* ************************************************** 三、其他兼容技巧(相当有用) 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不 会.(可用!important解决)

浏览器兼容性

浏览器兼容性 浏览器的内核 Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( WebKit ) Google Chrome ( WebKit ) 腾讯TT、世界之窗、360浏览器、遨游浏览器都是给IE加了个外壳，不过如果电脑上装的是ie8的话，这些浏览器还是调用ie7的内核。搜狗浏览器比较特殊，它有两种浏览模式：一是兼容模式，该模式使用IE内核；二是高速模式，该模式使用WebKit内核。解决ie7、ie8兼容性最好的办法是在head标签中加入meta 类型，只要IE8一读到这个标签,它就会自动启动IE7兼容模式 CSS Hack 解决浏览器兼容性问题的主要方法是CSS hack。由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。 CSS Hack的原理是什么 由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。比如 IE6能识别

浏览器兼容性测试

Rendering Engine(浏览器内核)与浏览器
常见浏览器的内核简介
2012-8-2 BLYK BLYK

----------BLYK 友情编辑
目录
Rendering Engine(浏览器内核)与浏览器 ...................................................... 错误！未定义书签。 1．浏览器内核介绍......................................................................................................................... 3 1.1 浏览器内核概念................................................................................................................. 3 1.2 主流浏览器内核介绍......................................................................................................... 3 1.2.1 Trident ...................................................................................................................... 3 1.2.2 Gecko ...................................................................................................................... 4 1.2.3 Presto ...................................................................................................................... 4 1.2.4 Webkit ..................................................................................................................... 4 1.3 排版引擎............................................................................................................................ 5 1.3.1 WebCore ................................................................................................................ 5 1.3.2 KHTML .................................................................................................................... 5 2. 主流浏览器所用内核简介 .......................................................................................................... 5 2.1 Firefox 浏览器 ........................................................................................................ 6 2.2 Internet Explorer（IE） ...................................................................................................... 7 2.2.1 6.0 版本 ............................................................................................................... 7 2.2.2 7.0 版本 ............................................................................................................... 7 2.2.3 8.0 版本 ............................................................................................................... 8 2.2.4 9.0 版本 ............................................................................................................... 9 2.3Google Chrome .................................................................................................................. 10 2.3.1 Google Chrome 市场份额 ................................................................................ 10 2.3.2 Google Chrome 版本分支.................................................................................. 10 2.4 Safari .............................................................................................................................. 11 2.5 360 安全浏览器............................................................................................................. 11 2.6 基于多内核的浏览器....................................................................................................... 11 2.6.1 傲游浏览器 3（Maxthon3.0+） ........................................................................ 11 2.6.2 QQ 浏览器 6.11 .................................................................................................. 11 2.6.3 搜狗高速浏览器（3.0+）.................................................................................. 12 2.6.4 Lunascape（5.0+）............................................................................................. 12 3. 浏览器构成.............................................................................................................................. 12 渲染流程......................................................................................................................... 13 主流浏览器所使用的内核分类 ..................................................................................... 13 4. 浏览器兼容性测试策略.......................................................................................................... 13 4.1 浏览器兼容性测试策略 ................................................................................................ 14 4.1.1 快速..................................................................................................................... 14 4.1.2 精确..................................................................................................................... 14 4.1.3 完整..................................................................................................................... 14