html页面适配兼容问题

1.背景：

许多情况如果开发的页面只是内部的成员自己应用，则只要在一种浏览器中显示功能正常即可；如果开发的网站是面向用户的，则要考虑到用户的使用的浏览器的不同，则要做到主流的浏览器中，页面的功能均可以正常使用。这是就会涉及到不同浏览器的适配问题，首先要考虑到目前浏览器的解析内核的区别，目前浏览器内核主要分为两大类，chrome和IE。像QQ浏览器、Firefox等与IE的解析内核相同，而360、sarfari等浏览器的解析内核与chrome相同。因此再调节网站适配问题时，可主要对比chrome和IE来弄，如果两种浏览器的至此都很好了，可以在系统的测一下其他浏览器的兼容性。

2.常见问题：

在chrome中页面显示正常，但在使用IE打开时，页面中会出现莫名其妙的空白行，引用的图片会有边框出现，原本在一行均匀分布的图标和文字排布变混乱（最常见的是变为按列分布连接线和图标分开），鼠标的样式不起作用，输入框中的提示文案不显示等。

3.常见问题解决方法：

1）web页面引用的图片在IE中莫名其妙的多边框问题而chrome显示正常

      此时就简单有效的方法就是找到对应的css样式（对应图片的css样式），在其中加入下面的语句达到不显示边框的目的。

border: 0px;    //  将引用的图片的边框设为0，即不显示图片的边框

2）web页面中的内容部分出现空白行，比如说一个网页系统的头部和尾部显示的结果和预期的一样，但在中间内容部分不同块之间出现了不等高的空白行。造成此问题的可能原因为每一个div和标题行（<h>标签可能有默认的margin值）。解决方法是在在div相应的h样式中加入如下代码：

margin-top:  0px;    //  设置标题上边距为0

3）原本多个图片排布在一行，中间使用连接线连接，但在IE中会出现所有图片各成一行，连接线单成一列，界面非常乱。解决此问题的方法是将原本使用<ul>和<li>嵌套的标签的css样式中<li>的样式中加入每一个图片在已调好的界面中的大小和显示设置，代码如下：

height: xxpx;    // 图片的长度
weight: xxpx;    // 图片的高度
list-style: none;    // 显示的样式
display: inline-block;    //  图片在一行进行分布

如果出现有的图标跑到下一行，则可能是由于外层的div块的长度取小了，可以通过调整div块的长度达到显示效果。

鼠标显示效果和输入框的默认提示文案的适配问题待下一篇博客整理..............