前端页面布局常见的兼容性问题和解决方法

前端页面兼容问题主要表现在我们所做的页面在不同浏览器显示会有所不同，目前主要的兼容性问题比较多的是IE6和IE7,另外针对html5和css3新标签，比如css3动画，媒体查询，画布，视频等暂时不做讨论，下面就针对常见的兼容性问题做下总结。

一 、不同浏览器margin和padding不同，这个一般都会遇到

解决方法：*{margin：0；padding：0} 统一格式

二 、ie6中，父级元素浮动以后，内部元素内容撑不开宽度

解决方法：元素内部的块级元素也设置浮动

代码如下：

html：

<div class="box">
<div class="left">
<h3>左侧</h3>
</div>
<div class="right">
<h3>右侧</h3>
</div>
</div>

css：

.box {
width:400px;
}
.left {
background: red;
float:left;
}
.right{
background: yellow;
float:right;
}
h3{
margin:0;
float:left;/*此处设置浮动，如果不设置，内容撑不来宽度*/

}

三、标签嵌套不规范，如p和h1-h5里面嵌套div

解决方法：请正确的嵌套元素标签

代码如下：

html：

 <h2>

/* 内部嵌套不合理*/
<div>

</div>
</h2>

css：

h2 {
width:100px;
height:100px;
background: red;
}

四、ie6小于19px，会当成19px处理，也就元素宽高小于19px的bug

解决方法：overflow:hidden;

代码如下：

html：

<div class="box"></div>

css：

.box {
height:1px;
background: red;
overflow: hidden;/*此处如果没有这个，会默认19px*/
}

五、在IE6下不支持1px的dotted边框样式

解决方法：可以采取切背景平铺的方法

六、在IE6和IE7下父级有边框的时候，子元素的margin会失效

解决方法：触发haslayout，父级元素设置zoom：1；

代码如下：

html：

<div class="box">
<div class="div"></div>
</div>

css：

.box {
background: red;
border: 1px solid black;
zoom:1;/*此处不设置，margin无效*/
}
.div {
width:200px;
height:200px;
background: blue;
margin:100px;
}

七、浮动后的元素在ie6下出现横向的双边距bug

解决方法给元素添加display：inline；

代码如下：

html：

<div class="box"></div>；

css：

.box {
width:100px;
height: 100px;
background: red;
float:left;
margin:100px;
display: inline;/*此处不添加会出现双边距bug*/
}

八、多列均分（border兼容问题和计算数值问题）

解决方法：在计算数值的时候一定要准确，不然的话兼容ie的时候布局非常麻烦，另外border这个也会出现一定问题，ie有些低版本的浏览器的内容部分包含border，其他浏览器不包含

代码如下：

html：

<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

css：

*{margin:0 ;padding:0 ;}

.box {
width:480px ;

/*1、注意这个是没有边框的情况下数值是width+margin*8（八个左右边距），如果不准确的话 ，ie浏览器会出现很多问题

        因为当一行子级元素宽度之和和父级的宽度相差超过3px，或者子级元素不满行的情况的时候，最后一行的子级元素的                   margin-bottom会失效

   2、有边框的情况下数值在常规浏览器下是width+margin*8（八个左右边距）+border（八个边框）

       ie7中width+margin*8（八个左右边距）+border（八个边框）另外底部需要用hack 设置padding-bottom的值

       ie5和ie6中width+margin*8（八个左右边距）

                                                                    */

background: black;
overflow: hidden;/*清除浮动*/
}
.box div {
width: 100px;
height: 100px;
background: red;
margin: 10px;
/*border:5px solid blue; 此处我给注释啦，如果需要边框自己测试下*/ 
float:left;
display: inline;/*此处处理双边距bug问题*/
}

九、在IE6,7下，li本身没有浮动，li里面的元素有浮动，li下出现间隙的问题

解决方法：常规下给li加vertical-align:top 如果最下间隙和最小高度bug共存的时候，利用hack给li添加浮动；

十、在IE6下，当浮动元素和绝对定位元素是兄弟关系的时候，绝对定位会失效

解决方法：不让浮动元素和绝对定位元素是兄弟关系，用div或者其他标签把子标签包起来

十一：在IE6.7下，子级元素有相对定位，父级overflow包不住子级元素

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

十二：在IE6下，如果绝对定位的父级宽高是奇数的时候，子级元素的right和bottom值会有1px的偏差

解决方法：尽量将父级宽高设置非奇数

十三：ie相关浏览器的透明度兼容问题

解决方法：给元素设置filter:alpha(opacity=50);

代码如下：

html：

<div class="box"></div>

css：

body {
height: 2000px;
background: red;
}
.box {
width:200px;
height: 200px;
background: yellow;
position: fixed;
top:30px;
left:100px;
opacity: 0.5;
filter:alpha(opacity=50);/*此处解决透明度问题*/

}

十四：在IE6.7下 输入型的表单标签控件上下会有1px的间隙。
解决方法：给input加浮动

代码如下：

html：

<div class="box">
<input type="text">
</div>

css：

.box {
width:200px;
height:32px;
border:1px solid #000;
}
input {
width:100px;
height:30px;
border:1px solid blue;
margin:0;
padding:0;
float:left;
}

十五：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug，这个和上面那个有点类似

解决方法：在display:block;后面加入display:inline;display:table;

十六：图片布局的问题，在布局的时候有的浏览器会出现间距

解决方法：使用 float浮动

十七、使用ie下判断ie的版本语句兼容

解决方法：<!--[if ie]>
我是IE
<![endif]-->

<!--[if ie 6]>
我是IE6
<![endif]-->


<!--[if ie 7]>
我是IE7
<![endif]-->


<!--[if ie 8]>
我是IE8
<![endif]-->

十八、hack方法兼容

解决方法：这个hack语句比较多，就简单的列举几个

css hack:
\9 ie10之前的ie浏览器解析的代码
+或者* 表示ie7包括7之前的ie浏览器
_表示 ie6包括6之前的ie浏览器

总结：以上列举的一些常见的兼容方法，兼容方面主要是IE浏览器的兼容，据不完全统计现在很多企业和单位前端页面要求在IE8以上的居多，当然也有全部都要兼容的，比如政府和银行金融等，随着互联网大环境的影响和新标签新属性的不断产生，相信兼容问题会朝着一个好的方向发展。