浏览器兼容性问题解决

最新推荐文章于 2023-09-20 20:24:32 发布
最新推荐文章于 2023-09-20 20:24:32 发布
阅读量411 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fandyvon/article/details/88720740
版权

浏览器兼容性问题解决

由于使用的浏览器有多种多样，这就导致了CSS在不同浏览器中出现不同的问题，特别是在IE6及以下版本中出现的兼容性问题，这就需要我们掌握CSS兼容性知识。

1、使用声明

在写HTML代码时，声明是首先要放在前面的，漏写声明将会导致很多问题产生。DTD声明在IE浏览器中会出现一些怪异的模式，所以我们为保证代码在IE浏览器正常运行，记得写DTD声明。

2、IE6下的双边距问题

我们知道外边距margin上下可以合并，但左右不合并。但是在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，这个时候margin值会加倍。比如：

<style>
	.div1{width:100px;height: 100px;border: 1px solid #ccc;background: green;float: left;margin-left: 30px;}
</style>
</head>
<body>
	<div class="div1"></div>
</body>

在IE6下，元素会离左侧的距离为60px，所以在IE6下浮动的元素，并且有margin-left或margin-right的元素会产生双边距问题。解决的办法就是： 对元素设置display:inline属性

3、行内元素的上下margin和padding不拉开间距的问题

当对行内元素设置上下margin或padding时，并不拉开间距，可能会与块级元素重合在一起。比如说：

块级元素
行内元素

行内元素与会计元素重合在一起了，针对这种情况，我们将行内元素变为行内块元素即可 span{background:green;padding:30px;margin:20px;display: inline-block;}

4、IE对png图片或gif图片透明度的支持

在IE6下，浏览器对png的透明度支持并不好。本该是透明的地方，在IE6下会显示为浅蓝色。可以使用IE下私有的滤镜功能来解决问题，格式如下：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’png图片路径’,sizingMethod=’crop’)。运用时直接复制。

5、IE6下3pxBUG

在IE6下，两个相邻的div，如果一个div浮动了，另一个div没有浮动，那么两个div之间就会出现一个3px的间隙 解决办法：a、.对另一个元素同时使用float； b.、为已经浮动的div添加一条语句：margin-right:-3px; ；

6、IE6下文字溢出BUG

在IE6下，子元素的宽度和父级的宽度相差小于3个像素的情况下，而且两个div之间有注释或者有内联元素时。内嵌越多，溢出越多。 解决办法：1、直接用<div></div>把注释或内嵌包起来。 2、或者把父级调大一点，超出3像素

7、IE6下绝对定位BUG

当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失掉。 解决办法：给定位元素包个div

8、IE下的“躲猫猫”BUG

这个BUG是这样产生的：一个浮动元素后面跟着一些非浮动元素，然后是一个清理元素，（内容出现在浮动元素旁边，然后内容后面是一个清理元素）所有这些元素都包含在一个设置了背景颜色或图像的父元素中。如果清理元素碰到了浮动元素，那么中间的非浮动元素看起来消失了，隐藏到了父元素的背景颜色或图像后面，只有重新刷新才出现。也可以在div#clear下面放置很长很长的内容，也就是使浏览器出现滚动条，你向下拖动滚动条再拖回来，它一样也出现了

解决办法： 1、去掉父元素上的背景颜色或图像

2、避免清理元素与浮动元素接触，如果容器元素应用了特定的尺寸，那么这个bug也不会出现

3、给容器指定行高，这个bug也不会出现

4、将浮动元素和容器元素的position属性设置为relative也会减轻这个问题。

9、定位中的兼容性问题

1、在IE6，7下子元素有相对定位的话，父级的overflow就包不住子元素。

解决办法：给父级也加相对定位

2、在IE6下，绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom的值会有1px的偏差。也就发生定位元素盖不住父级的边框，无解决办法

3、固定定位在IE6下不支持，可以用JS解决

10、表单表格中的兼容性问题

1、在表格中，不要同时给tbody和tr加背景

2、在IE6，7下输入类型的表单控件上下各有1px的间隙，表单控件会撑开父级高度

解决办法：给input加浮动。

3、在IE6，7下输入类型的表单控件加border:none无效。

解决办法：1、给border设置为0

2、给input的border设置颜色也可以解决

4、在IE6，7下输入类型的表单控件输入文字的时候，input的背景图片会跟着文字一起移动，

解决办法：把背景加给父级，再清掉input的背景。

11、IE6下的重复字符BUG

当在一系列的浮动元素的第一个和最后一个元素之间有多个注释时，   就会出现这个bug

解决办法：   1、从HTML代码中删除注释

2、给浮动元素添加margin-right:-3px;

3、浮动元素加背景色background-color: #eee;

4、在父级容器加入：display:inline;

12、使用IE专用的条件注释

为了使代码在IE6下也同样使用，可以使用IE专用的注释进行注释。

<!--[if IE 7]>
<!-- 适合于IE7 -->
<!--[if lte IE 6]>  适合于IE6及以下
其他的还有类似于：
1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
2. <!--[if IE]> 所有的IE可识别 <![endif]-->
3. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
4. <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
6. <!--[if IE 6]> 仅IE6可识别 <![endif]-->
7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
8. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
9. <!--[if IE 7]> 仅IE7可识别 <![endif]-->
10. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
11. <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->注:gt = Great Then 大于
> = > 大于号
lt = Less Then 小于
< = < 小于号
gte = Great Then or Equal 大于或等于
lte = Less Then or Equal 小于或等于

 

13、图片间隙

产生原因：主要是因为图片的垂直对齐方式vertical-align引发的，默认值是baseline，默认为此值时图片下方就会多出3px。

解决方案：

1.将图片的垂直对齐方式vertical-align的值设置为bottom，就可以解决这个问题。

2.将图片display设置为block，并且指定width和height。

3.设置图片所在的容器元素和width和height与图片一样。

A、div中的图片间隙（该BUG出现在所有浏览器中）

描述：在div中插入图片时，图片会将div下方撑大3px  当div的高度和图片的高度一致的时候就会出现这个情况

方法1：将<div>与img写在一行上

方法2：将img转为块元素，给添加声明。display:block

这种方法多用于banner上，如果有多个图片，用浮动解决

B、当图片横着排的时候，图片和图片之间存在一定的间距

方法：给图片浮动，浮动解决。img{float:left}

C、dt，li中图片间隙

将转为块元素，给添加声明：display:block

14、图片在IE浏览器上有蓝色的边框

解决：给img的边写成0.   img{border:0;}

15、默认高度

描述：在IE6及以下版本中，部分块元素拥有默认高度（低于18px），也就是说当元素的高度不足18px的时候，浏览器自身会默认给18px 解决：A、给元素添加声明：font-size:0; B、给元素添加声明：overflow:hidden

16、表单元素距离顶部间距不一致

描述：也就是表单中当文本框与按钮并排排列时，文本框与按钮与顶部的间距是不一样的。 解决：给表单元素添加声明：float:left

17、按钮元素默认大小不一

描述：在不同浏览器中，按钮buttom的大小和提示信息不一样。 解决：A、统一大小。提示信息使用value B、外边套一个标签里写按钮的样式，把input的边框去掉 C、如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。

18、百分比BUG

描述：在IE6及以下版本中在解析百分比时，会按照四舍五入的方式计算，从而导致50%加50%大于100%的情况 解决：给右面的浮动元素添加声明clear:right

19、鼠标指针的不同

描述：cursor属性有多重属性值，其中hand属性值只有IE9以下浏览器识别，其他浏览器不识别该声明，cursor属性的pointer属性值IE6以上版本及其它内核浏览器都识别该声明 解决：统一声明：cursor:pointer

20、子元素没设置任何浮动，设置了margin-top属性后，会错误的把margin-top的属性值添加给父元素

描述：当子元素不浮动时，但给子元素添加了margin-top时会将这个top值添加给父元素。如果子元素设置了浮动属性就不会出现这个问题 解决：A、给父元素添加overflow:hidden B、使用padding-top

21、当li里面的a标签转换为块元素的时候，如果想要让所有的列表项都在同一行显示，需要给li和a都设置浮动属性，否则，IE6里面会出现每个li独占一行的情况

22、当li里的a转换为块元素时，给a写浮动属性时，IE6会错误的将列表显示成阶梯状，解决的方法就是li元素同样添加浮动属性

23、如果想去掉input的默认边框，需要将input的border属性值设置成0才可兼容多个浏览器

24、input的type类型是text的时候，提示信息用value表示

25、如果设置了input的高度，在其他浏览器上显示的value的内容是垂直居中的，但是在IE6上是靠在顶部的，解决的办法就是给input添加一个行高等于它的高度。

26、过滤器的使用

在IE6下，有很多属性并不能直接使用或者说IE6并不能很好的识别。这个时候我们就要用到过滤器。

26-1:、下划线属性过滤器

当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。 语法：选择符{_属性：属性值；}

26-2、!important关键字过滤器

它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它，我们可以利用IE6的这个Bug作为过滤器来兼容ＩＥ６和其它标准浏览器。 语法：选择符{属性：属性值!important;} height:300px; height:200px !important; height:300px; height:200px;

26-3、IE浏览器组的使用

\9：IE浏览器组 语法：选择符{属性：属性值\9;} \0:IE8 包括IE8 语法：选择符{属性：属性值\0;}只有IE8以上浏览器起作用 +：ie7 IE7 以下(包括IE7) 语法：选择符{+属性：属性值;} ：root选择器 除了IE8及更早的浏览器 语法：:root 选择符{属性：属性值;}

27、元素具备最小高度的自适应，兼容IE

min-height属性：最小高度；(IE6浏览器不识别该属性) 兼容元素具备最小高度自适应的方法： hack1:min-height:value; _height:value; hack2:min-height:value; height:auto !important; height:value;(建议使用)

28.window.event

表示当前的时间对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象

29.获取事件源

IE用srcElement获取事件源，而FF用target获取事件源

以上两个兼容通常会这么写：

var evt = e||event;

var el = evt.srcTarget || evt.srcElement;
30、获取标签的自定义属性

IE：div1.value或div1[‘value’]

FF:可用div1.getAttribute(“value”)

31、document.getElemntByName()和document.all[name]

IE不可以，

FF可以

32、窗口的位置

IE、chrome、safari：支持使用window.screenLeft和window.screenTop

IE8以上、chrome、safari、firefox：支持使用window.screenX和window.screenY 兼容代码可以使用下面这段代码：

var leftX = typeof window.screenLeft == 'number' ? window.screenLeft : window.screenX;

ver topY = typeof window.screenTop == 'number' ? window.screenTop : window.screenY;
33、窗口的大小

firefox、chrome、IE9和safari:window.innerWidth和window.innerHeight

IE系列:document.body.clientWidth和document.body.clientHeight

不是IE6：document.documentElement.clientWidth和document.documentElement.clientHeight

兼容代码可以这样子写

var width = window.innerWidth;

var height = window.innerHeight;

if(typeof width != 'number'){

if(document.compatMode == 'CSS1Compat'){

width = document.documentElement.clientWidth;

height = document.docuementElement.clientHeight;

}else{

width = document.body.clientWidth;

height = document.body.clientHeight;

}

34、IE支持innerText、outerHTML;FF：支持textContent

寒江独
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery解决浏览器兼容性问题案例分析
10-22
主要介绍了jQuery解决浏览器兼容性问题的方法,结合实例形式分析了针对不同浏览器的click事件响应兼容性问题,需要的朋友可以参考下
JavaScript如何获取网页的宽高，以及如何兼容（各种坑详解）
weixin_44552302的博客
05-10 338
很多场景下会需要获取当前网页的宽高来达到一些效果，但是获取网页的宽高这里面还是有一点（hen duo）坑的，这里我进行了总结和详解，若有补充欢迎评论补充~ 方式一：window.innerWidth / window.innerHeight 这种方式只支持IE9以及以上版本的浏览器 网页高度，打开F12控制台当然高度会不同 方式二：document.documentElement.clientWidth console.log(document.documentElement); console.lo
浏览器兼容性问题
u013400314的博客
06-24 172
事件对象阻止默认行为 阻止事件冒泡 鼠标事件对象
常见浏览器兼容性问题及解决办法总结
热门推荐
萌兔兔MMQ！！
07-19 1万+
border0;我们常用的div布局，div是块级元素，横向布局的时候我们通常都是用divfloat实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题在IE6显示margin比设置的大,常见症状是IE6中后面的一块被顶到下一行。解决方案原先元素的border去掉，然后利用before或者after重做border，并transform的scale缩小一半，原先的元素相对定位，新做的border绝对定位。当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。...
浏览器兼容性问题及解决方案大汇总
qq_51179053的博客
07-03 2961
所谓浏览器兼容性问题：是指不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的效果。解决方法前端开发疆场需要检查浏览器的兼容性，这里推荐（Can I Use）这个查询网址。是一个针对前端开发人员制定的一个查询CSS、JS、HTML5、SVG，可以很好的保证网页在浏览器中的兼容性。CSS兼容问题1、不同浏览器的标签默认的内外边框不同。解决方案 {margin:0;padding:0}/** * 该文件用于清除浏览器样式 */ html, body, div, span, applet, objec
解决浏览器兼容性的五大方案
杏子
04-28 7500
浏览器兼容性涉及的内容有很多，特别是针对IE浏览器，以下整理出五种常见的浏览器兼容性解决方法。 一、样式初始化 由于各大浏览器会有自身的默认样式，并且不尽相同，所以为了尽可能的保证样式的统一性，前端在开发项目之前都会先进行样式格式化，最常见的分为以下几个方面。 1.pandding 值和 margin 值均设置为 0 将html、body、a、li、ol、input、textarea、s...
CSS 多浏览器兼容性问题及解决方案
12-11
Javascript 多浏览器兼容性问题及解决方案 兼容性处理要点 1、DOCTYPE 影响 CSS 处理 2、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width 3、FF:...
angular浏览器兼容性问题解决方案.docx
10-26
angular浏览器兼容性问题解决方案.docx
关于angular浏览器兼容性问题的解决方案
10-15
主要给大家介绍了关于angular浏览器兼容性问题的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者使用angular具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
常见浏览器兼容性问题汇总及解决方案
03-21
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的...
浏览器兼容性及其解决方案整理
weixin_47450807的博客
04-07 4930
一、了解浏览器 主流浏览器：IE(Trident内核)、Firefox(火狐：Gecko内核)、Safari(苹果：webkit内核)、Google Chrome(谷歌：Blink内核)、Opera(欧朋：Blink内核) 四大内核:Trident(IE内核)、Gecko(Firefox内核)、webkit内核、Blink(Chrome内核) 二、了解兼容问题 W3C对标准的推进，Firefox，Chrome，Safari，Opera的出现，结束了IE雄霸天下的日子。 然而，这对开发者来说，是好事，也是坏事
浏览器的兼容问题及解决方案整理（建议收藏）
forever
04-17 3711
从开发者角度来讲，多了解标准，了解浏览器兼容性问题，就可以在开发的过程中，有效的避开兼容性问题，让你的页面在所有浏览器中畅通无阻。然而，这对开发者来说，是好事，也是坏事。说它是好事，是因为浏览器厂商为了取得更多的市场份额，会促使各浏览器更符合W3C标准，而得到更好的兼容性，并且，不同浏览器的扩展功能(例如。而人为造成兼容性问题的原因，除了粗心之外，大都源于浏览器bug的存在，和开发者对标准的不了解。W3C对标准的推进，Firefox，Chrome，Safari，Opera的出现，结束了IE雄霸天下的日子。
浏览器兼容性问题及常见的解决方法
萌兔兔MMQ！！
07-19 8283
做兼容页面的方法是每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。解决方法如果我们要设置一个标签的最小高度为200px，需要进行的设置为{min-height200px;height200px;heihgt，所以当IE6读到*height200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。4.行内属性标签，设置displayblock后采用float布局，又有横行的margin的情况，IE6间距bug。...
前端开发中常见的浏览器兼容性问题及解决方案
qq_39715380的博客
05-17 3776
浏览器兼容性问题
浏览器兼容性问题与解决方案
m0_47224321的博客
11-24 1546
所谓浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。 浏览器兼容问题一：不同浏览器的标签默认的内外补丁不同（margin padding） 频率：100% 解决方案：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。 浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大 频率：90%（float布局最常见的浏览器兼容问题） 解决方案：在f
常见的浏览器兼容性问题与解决方案
blackhehaha的博客
09-15 1294
1，浏览器兼容问题一：不同浏览器的标签默认的margin和padding不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大 碰到频率:100% 解决方案：CSS里 *{margin:0;padding:0;} 2、块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大 问题表现：IE6后面的一块被顶到下一行 解决方案：在float的标签样式控制中加入display:inline;转化为行内属性 备注：横向浮动的div布局
前端常见浏览器兼容性问题解决方案
最新发布
2301_77456141的博客
09-20 2058
不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎。所以浏览器兼容性问题一般指：css兼容、js兼容。
常见浏览器兼容性问题与解决方案
qq_42375089的博客
08-11 246
文章转自与于 https://blog.csdn.net/weixin_38536027/article/details/79375411   所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会...
【浏览器兼容性问题解决方案】
Lnbd_的博客
02-16 3220
浏览器兼容性问题解决方案
如何解决浏览器兼容性问题
05-26
解决浏览器兼容性问题的方法有很多，以下是一些常用的方法： 1. 使用现代化的前端框架和库，如React、Angular、Vue等，这些框架和库会自动处理兼容性问题。 2. 使用CSS预处理器或PostCSS，它们可以自动为不同的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值