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

标签: 常见 浏览器 兼容性 | 发表时间:2014-02-25 19:27 | 作者:赵大帅
出处:http://www.iteye.com

浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同

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

碰到频率:100%

解决方案:CSS里 *{margin:0;padding:0;}

备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的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。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的。



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [常见 浏览器 兼容性] 推荐:

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

- - 浏览器 - 互联网 - ITeye博客
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同. 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 解决方案:CSS里 *{margin:0;padding:0;}. 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0.

AngularJS的IE浏览器兼容性

- - JavaScript - Web前端 - ITeye博客
        如果你要让你的AngularJS应用兼容IE8和IE8以下的版本的话,你需要做一些特殊处理. 要让你的AngularJS应用在IE中正常运行你必须:.     a.确保JSON字符串能被正常解析(IE7需要),你可以使用JSON2或者JSON3来实现.     b.不能使用自定义的元素标签,如(你只能使用属性的形式,如
).

CSS对浏览器的兼容性

- - CSDN博客Web前端推荐文章
从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于浏览器的兼容性问题,请尽量用符合W3C标准格式写代码. 而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名,并且需要写到页面的最上面. input、br、img等为常用自闭合标签,需要加入“/”进行闭合,例如“”;其他闭合标签需要进行闭合,例如“
....
”.

常见浏览器内核

- - Web前端 - ITeye博客
一、Trident内核代表产品Internet Explorer,又称其为IE内核. Trident(又称为MSHTML),是微软开发的一种排版引擎. 使用Trident渲染引擎的浏览器包括:IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等.

12款浏览器兼容性测试工具推荐

- Chloe - cnBeta.COM
对于前端开发工程师来说,确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,让我们一起看看这些很棒的工具.

五大主流浏览器 CSS3 和 HTML5 兼容性大比拼

- jessie - 博客园-梦想天空
  各大主流浏览器对 CSS3 和 HTML5 的支持越来越完善,曾经让多少前端开发人员心碎的IE系也开始拥抱标准. 就在前几天,W3C的 HTML5 社区领袖 Shelley 宣布,HTML5的开发工作已经接近完成,如果进展顺利,HTML5 将在 2012 年正式成为国际标准.   当然,即使标准正式制定了,现代浏览器要普及到大部分用户也是需要一个相当漫长的过程.

移动浏览器HTML5兼容性列表

- 沈蚊 - 前端观察
这个很赞,整理了智能手机和平板中默认浏览器对HTML5和CSS3新技术的支持情况. 多谢 @cnjoel 在twitter的分享. 这个网站的开发者是firt,国外网页开发者. 直接访问吧:http://mobilehtml5.org/. PS:这样分享一个网站貌似有发文章充数的嫌疑. 不过考虑很多人不玩twitter/微博,好东西要让更多人知道吧.

Firefox下的浏览器兼容性检测工具——Compatibility Detector

- mingelz - 携程UED
这里给大家推荐一个Firefox下的浏览器兼容性检测工具——Compatibility Detector. 这个工具对于新手来说是非常不错的一个东东,下面我就简单说下它的优点. 作为一个前端开发者来说,最痛苦的事情之一就是要兼容现在各种五花八门的浏览器,而在实际的调试中这个调试过程又是让人劳心劳力.

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

- - ITeye博客
原文链接 http://www.javaarch.net/jiagoushi/611.htm. 如果需要传递参数,可以使用frame或者iframe. 兼容所有: 在声明变量时,一律加上 var ,以避免歧义,这样在 IE 中亦可正常运行. 此外,最好不要取与 HTML 对象 id 相同的变量名,以减少错误.

Selenium Grid跨浏览器-兼容性测试

- - CSDN博客互联网推荐文章
Selenium Grid跨浏览器-兼容性测试. 这里有两台机子,打算这样演示:. 一台机子启动一个作为主点节的hub 和 一个作为次节点的hub(系统windows 浏览器为ie) ip为:192.168.4.124. 另一台机子启动两个次节点hub,一个次节点浏览器为firefox,另一个浏览器为chrome (系统为windows),ip为:192.168.4.137.