常见的浏览器兼容性问题

最新推荐文章于 2023-07-04 17:22:12 发布

原创最新推荐文章于 2023-07-04 17:22:12 发布 · 468 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器兼容性问题

html 同时被 2 个专栏收录

4 篇文章

订阅专栏

css

3 篇文章

订阅专栏

1. IE6双边距问题:

问题描述：

浮动元素拥有同向margin值（left和margin-left，right和margin-right），在ie6s上第一个元素会出现双边距。

解决方案：

解决：ie6 _display:inline;_针对ie6

body{margin:0;}
div{
float:left;
margin-left:10px;
width:100px;
height:100px;background:red;
_display:inline;}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

2.子元素相对定位父元素溢出隐藏失效

问题描述

子元素定位，它的定位为定位，子元素超出父元素的大小。仅仅给父元素overflow:hidden属性，在IE浏览器上不会隐藏溢出的子元素部分。

解决方案：

除了给父元素加overflow:hidden还要给定位父元素加：position:relative；

.box{width:200px;height:200px;background:red; overflow:hidden; position:relative;}
.box2{width:100px;height:300px;background:green; position:relative;}
<div class="box">
	<div class="box2"></div>
</div>

图片描述

定位父元素不加定位情况下：
不定位
定位父元素定位之后

3. IE转内联块失败

问题描述：

display:inline-block;在IE6和IE7上面转换失败。

解决方案：

*display:inline; *zoom:1;

.box{ display:inline-block;width:200px;height:200px;border:1px solid red;display:inline;*zoom:1}
 <div class="box"></div>
 <div class="box"></div>

图片描述

渲染效果

4. IE中input输入文字不垂直居中

问题描述：

在IE中文字输入不垂直居中

input{border:none;background:none;line-height: 60px}
.bg{ border:1px solid #000;background:url(so_bg.jpg) no-repeat left center;width:200px;height:60px;}
<input type="text" class="bg"/>
<div class="bg">
   <input type="text" style="width:200px;height:60px;"/>
</div>

解决方案：

line-height:高度值.px

图片描述

垂直居中

5 input背景问题

问题描述：

如上面图片显示一样，背景图片会遮盖输入文字。

解决方案：

给inut在相应的padding值：比如padding-left:30px;
这样文字就显示在背景图片的右边而不会被文字遮住。

图片描述

背景问题

6 li的子元素浮动间隙问题

问题描述：

li的子元素浮动时，IE6和IE7会产生间隙问题。

解决方案：

在<li>上加：vertical-align:middle/top/bottom;

.list{margin:0;padding:0;list-style:none;width:300px;}
.list li{height:30px;line-height:30px;background:red;/*vertical-align:middle;*/}
.list li a{float:left;}//li子元素浮动
.list li span{float:right;}
<ul class="list">
   	<li><span>2017-05-23</span><a>新闻内容</a></li>
	<li><a>新闻内容</a><span>2017-05-23</span></li>
   	<li><a>新闻内容</a><span>2017-05-23</span></li>
   	<li><a>新闻内容</a><span>2017-05-23</span></li>
   	<li><a>新闻内容</a><span>2017-05-23</span></li>
</ul>

图片描述

li间隙

7. IE6最小高度

问题描述

IE6元素在高度小于19px时，会以19px显示。

.box{height:6px;background:red;font-size:0;}
<div class="box"></div>

8 IE6 最小高度

问题描述：

IE6不支持min-height,针对ie6添加height，在ie6可以有同样效果
min-height ：1 最小高度（可以使元素在内容少时显示为最小高度指定的值，内容多时撑开自适应）
2 能大于，不能小于，最小这个高度

解决方案

_height:300px;

9 IE下PNG24支持问题

问题描述

在IE6下png24图片显示为不透明

解决方案

适情况而定，优先使用jpg 或者 png8,gif
js方法解决（适用于透明背景和透明图片）
JS解决方案：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--[if IE 6]>
   <script src="DD_belatedPNG_0.0.8a-min.js"></script>
   <script>
      DD_belatedPNG.fix('.pngpic,.logo');
   </script>
<![endif]-->
<style type="text/css">
    .bg{width:218px;height:288px;background:url(bg.png) no-repeat;_background:url(bg2.png) no-repeat;}
	.bg{width:218px;height:288px;background:url(bg.png) no-repeat;}
</style>
</head>
<body style="background:red;">
	<img src="bg.png"/>
    <div class="bg"></div>
    <img src="bg.png" class="pngpic"/>
    <div class="bg logo"></div>
    <img src="../../2.png"/>
</body>
</html>

10.浮动注释在IE6造成谍影

问题描述

运行代码，在IE6下会多出一只“鬼”。

.test{zoom:1;overflow:hidden;width:500px;}
.box1{float:left;width:100px;}
.box2{float:right;width:400px;}
<div class="test">
	<div class="box1"></div>
	<!-- 注释 -->
	<div class="box2">↓你是什么鬼</div>
</div>

解决方案：

造成此BUG的原因可能是多重混合的，如浮动，注释，宽高定义等等。并且注释条数越多，溢出的文本也会随之增多。

删除box1和box2之间所有的注释；
不设置浮动等。

图片描述

谍影重重

11 hack条件注释语句

<!--[if IE]>
    只能被 IE 识别;
<![endif]-->

<!--[if IE 6]>
	这是ie6
<![endif]-->

<!--[if IE 7]>
	这是ie7
<![endif]-->

<!--[if IE 8]>
	这是ie8
<![endif]-->

<!--[if gt IE 6]>
    这是大于ie6
<![endif]-->

<!--
    gt（greater than） 大于
    gte（greater than or equal）大于等于
    lt（less than） 	小于
    lte（less than or equal）  小于等于
    ! 	非
-->
<!--
	IE 条件注释判断语句是 IE 特有的功能，通过 HTML 注释中的条件语句能让不同的 IE 版本识别注释中的内容
    自IE10起，标准模式不再支持条件注释
-->

12 CSS-hack属性级

什么是CSS hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

CSS hack的原理

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

CSS hack分类

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

属性前缀法(即类内部Hack)：例如 IE6能识别下划线"“和星号” * “，IE7能识别星号” * “，但不能识别下划线”"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

 .box{width:200px;height:200px;background:red;
 *background:blue;background:pink\9;//css  hack
 } .box2{width:100px;height:100px;background:blue;
 _background:green;//css  hack
 }
<!--
   * ie6 7
   _ ie6
   \9 选择IE6+
-->
<div class="box"></div>
<div class="box2"></div>

图片说明

css-hack

13 !important 优先级

问题描述：

！important优先级高于行间样式

.box{width:100px;height:100px;background:red!important;}
<!--
!important提升样式优先级
    高于
    行间样式
-->
<div class="box" style="background:pink;"></div>

图片描述

背景由于优先级的问题显示的并不是pink粉红色。
important样式

14伪元素

IE7及以下浏览器不支持伪元素选择器。
清浮动兼容处理。

.clearfix{*zoom:1;}/*ie7及以下兼容性处理*/
.clearfix:after{content:"";display:block;clear:both;}

常见的浏览器兼容性问题

目录

1. IE6双边距问题:

问题描述：

解决方案：

2.子元素相对定位父元素溢出隐藏失效

问题描述

解决方案：

图片描述

3. IE转内联块失败

问题描述：

解决方案：

图片描述

4. IE中input输入文字不垂直居中

问题描述：

解决方案：

图片描述

5 input背景问题

问题描述：

解决方案：

图片描述

6 li的子元素浮动间隙问题

问题描述：

解决方案：

图片描述

7. IE6最小高度

问题描述

8 IE6 最小高度

问题描述：

解决方案

9 IE下PNG24支持问题

问题描述

解决方案

10.浮动注释在IE6造成谍影

问题描述

解决方案：

图片描述

11 hack条件注释语句

12 CSS-hack属性级

什么是CSS hack

CSS hack的原理

CSS hack分类

图片说明

13 !important 优先级

问题描述：

图片描述

14伪元素