前端页面构造中遇到过什么样的兼容性问题，如何解决（常见的兼容性问题），浏览器常见的兼容性问题？

答：
1）不同浏览器默认的margin和padding不同

//设置统一格式
*{margin：0；padding：0} 统一格式

2）ie6中，子元素设置浮动以后，内部元素内容撑不开父元素的高度

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

3）浮动后的元素，在ie6即以下版本出现横向的双边距bug
任何浮动元素的外边距加倍，如元素设置margin-left:15px，在浏览器下显示margin-left:30px

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

4）3px问题—在IE6及以下版本的IE中，两个相邻的div之间有3px间隙，一个div使用float，另一个没有使用

解决方法：给浮动元素设置IE6的hack，即在margin_right前面添加下划线，_margin-right:-3px

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

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

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

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

7）ie6中元素宽高小于19px，会当成19px处理

//解决方法
设置overflow:hidden;

8）IE8及以下版本的浏览器不支持opacity，解决方法添加IE滤镜alpha()

Opacity:0.8;
 
Filter:alpha(opacity=80);
 
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=80)”;

9）在IE6和IE7下父级有边框（border）的时候，子元素的margin会失效

//解决方法
父级元素设置zoom：1；

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

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

11）IE超链接hover点击后失效：使用正确的书写顺序 link visited hover active
12）IE给子元素设置z-index不生效：给父级添加position:relative
13）IE min-height不生效：在min-height的末尾加上！important解决

14）H5标签在IE5/IE6下不兼容

比如<header>、<section>、<footer>等标签在IE5/IE6下不会按照预设的css显示

解决方法：通过js的document.createElement(‘header’)，通过js创建的元素默认为是自定义标签（内联元素），如果想设置宽高，需给每个元素添加display:block。

问题：如果需要创建的元素比较多，就很麻烦。

另一个解决方案：引入H5 JS插件。