常见的浏览器兼容性问题总结

简介:


1. 不同浏览器的标签默认外补丁margin和内补丁padding不同


发生概率:100%


解决方案:使用CSS通配符*,设置内外补丁为0


*{ margin: 0; padding: 0;}


2. 块属性标签float之后,又有横向的margin值,在IE6中显示会比设置的大(IE6双边距bug)


发生概率:90%


解决方案:在float标签样式控制中加入display:inline;


 


3. 设置较小的高度标签(一般小于10px),在IE6,IE7,遨游中超出自己设置的高度


发生概率:60%


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


4. 行内标签设置display:block;后又采用float布局,再设置横向margin值时,在IE6中显示会比设置的大(IE6双边距bug)


发生概率:20%


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


5. 图片默认有间距


发生概率:20%


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


6. 标签最低高度设置min-height不兼容


发生概率:5%


解决方案:例如要设置一个标签的最小高度为200px


{ min-height: 200px;


height: auto!important;


height: 200px;


overflow: visible;}


7. 透明度兼容设置


发生概率:主要看你要写的东西设不设透明度


解决方案:一句话


transparent_class {


filter:alpha(opacity=50);


-moz-opacity:0.5;


-khtml-opacity: 0.5;


opacity: 0.5;


}


opacity:0.5; This is the “most important” one because it is the currentstandard in CSS. This will work in most versions of Firefox, Safari, andOpera.This would be all you need if all browsers supported current standards. Which,of course, they don’t.


filter:alpha(opacity=50); This one you need for IE.


-moz-opacity:0.5; You need this one to support way old school versions of theMozilla browsers like Netscape Navigator.


-khtml-opacity:0.5; This is for way old versions of Safari (1.x) when therendering engine it was using was still referred to as KTHML, asopposed to thecurrent WebKit .


8. Box Model的bug


描述:给一个元素设置了高度和宽度的同时,还为其设置margin和padding的值,会改变该元素的实际大小。


解决办法:在需要加 margin和padding的div内部加一个div,在这个div里设置margin和padding值。


9. IE6中的列表li楼梯状bug


描述:通常在li中的元素(比如a)设置了浮动float,但li本身不浮动。


解决办法:


ul li{float:left;}


或 ul li{display:inline;}


10.li空白间距


描述:在IE下,会增加li和li之间的垂直间距


解决办法:给li里的a显式的添加宽度或者高度


li a{width:20px;}


或者


li a{display:block;float:left;clear:left;}


或者


li {display:inline;}


li a{display:block;}


或者


在每个列表li上设置一个实线的底边,颜色和li的背景色相同


11.overflow:auto;和position:relative的碰撞


描述:此bug只出现在IE6和IE7中,有两个块级元素,父元素设置了overflow:auto;子元素设置了position:relative;且高度大于父元素,在IE6-7中子元素不会被隐藏而是溢出。


解决方案:给父元素也设置position:relative;


12.浮动层的错位


描述:当内容超出外包容器定义的宽度时会导致浮动层错位问题。在Firefox、IE7、IE8及其他标准浏览器里,超出的内容仅仅只是超出边缘;但在IE6中容器会忽视定义的width值,宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素,那么就会导致错位问题。


解决方案:overflow:hidden;


13.IE6克隆文本的bug


描述:若你的代码结构如下





……





很有可能在IE6网页上出现一段空白文本


解决方案:


使用条件注释


删除所有注释


在注释前面的那个浮动元素加上 display:inline;


14.IE的图片缩放


描述:图片在IE下缩放有时会影响其质量


解决方案:img{ -mg-interpolation-mode:bicubic;}


15.IE6下png图片的透明bug


描述:使用透明图片,使用png24或png32图片在IE6下面显示图片会有一层淡蓝色的背景。


解决方案:


.img{


background:url('http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png');


_background:0;


_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');


}


img{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');}



http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');" alt="" />


16.透明背景bug


描述:在IE浏览器中,框架不会自动把背景设为透明


解决方案:



在iframe调用的content.html页面中设置


body{background-color: transparent;}


相关文章
|
消息中间件 存储 缓存
Spring Cloud 分布式实时日志分析采集三种方案~
Spring Cloud 分布式实时日志分析采集三种方案~
Spring Cloud 分布式实时日志分析采集三种方案~
|
存储 JavaScript 测试技术
rpmdb损坏的修复方法
yum强制终止后,提示rpmdb损坏 error: cannot open providename index using db3 - bad file descriptor
9456 0
|
SQL JSON 安全
Spring Authorization Server OAuth2授权服务器配置详解
Spring Authorization Server OAuth2授权服务器配置详解
3926 0
|
机器学习/深度学习 算法 Unix
循环编码:时间序列中周期性特征的一种常用编码方式
循环编码是深度学习中处理周期性数据的一种技术,常用于时间序列预测。它将周期性特征(如小时、日、月)转换为网络可理解的形式,帮助模型识别周期性变化。传统的one-hot编码将时间特征转换为分类特征,而循环编码利用正弦和余弦转换,保持时间顺序信息。通过将时间戳转换为弧度并应用sin和cos,每个原始特征只映射到两个新特征,减少了特征数量。这种方法在神经网络中有效,但在树模型中可能需谨慎使用。
1566 5
|
存储 网络协议 API
HTTPDNS-ios 接入指南|学习笔记
快速学习 HTTPDNS-ios 接入指南
814 0
HTTPDNS-ios  接入指南|学习笔记
|
分布式计算 Hadoop Linux
Hadoop运行环境搭建(开发重点二)克隆虚拟机、利用模板机hadoop100,克隆三台虚拟机:hadoop102 hadoop103 hadoop104、修改克隆机IP和主机名称、网络配置
在XShell和Xftp连接hadoop102、hadoop103和hadoop104、配置Linux克隆机主机名称映射hosts文件,打开/etc/hosts、如何将hadoop104从磁盘删除、如何再将hadoop100添加回来、如果不小心将虚拟机hadoop100移除了、为什么不从hadoop101开始,因为一开始hadoop101留给了单台服务器操作使用,而用102,103,104搭建的是完全分布式,真正的生产集群。后面可以用101进行源码的编译...
476 1
Hadoop运行环境搭建(开发重点二)克隆虚拟机、利用模板机hadoop100,克隆三台虚拟机:hadoop102 hadoop103 hadoop104、修改克隆机IP和主机名称、网络配置
|
算法 小程序 C语言
【c语言】 我使用c语言基础做了一个老少皆宜的“国民小游戏【扫雷】
扫雷小游戏是一款非常优秀悠闲的小游戏,在各个pc端上都会有他的身影出现,我们学习了编程,为何不自己做一个游扫雷小戏游戏呢?说做就做,来先看一下大概的效果图。
279 0
【c语言】 我使用c语言基础做了一个老少皆宜的“国民小游戏【扫雷】
|
分布式计算 DataWorks 数据可视化
海量大数据大屏分析展示一步到位:DataWorks数据服务对接DataV最佳实践
数据服务是DataWorks产品家族的一员,提供了快速将数据表生成API的能力,通过可视化的向导,一分钟“零代码”就可以生成API,让API开发从未有过如此便捷!数据服务与DataV深度打通,数据服务生成的API可以直接在DataV中进行可视化展现。本文介绍了数据服务对接DataV的使用方法。
12489 0
|
机器学习/深度学习 人工智能 机器人
AI学习笔记之——强化学习(Reinforcement Learning, RL)
诚如在之前文章提到的,机器学习按照从那里学的角度可以分为:监督学习,无监督学习和强化学习三大类。之前的文章大多数都是介绍的前两类,而第三类强化学习(RL)确是最接近我们所想象的人工智能。
2086 0