html手机和电脑一致,浏览器兼容性(手机、电脑。js、html、css)

浏览器兼容性问题

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题

浏览器兼容的重要性:

网站做好了浏览器兼容，能够让网站在不同的浏览器下都正常显示

浏览器兼容能够抓住更多的网站访客

浏览器兼容能够给客户更好的体验

CSS Bug、CSS Hack和Filter

IE6常见CSS解析Bug及hack(解决方法)

1)样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.

2)CSS Hack: CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，修补bug的方法

3)Filter:表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是hack方法中的一种；

1)默认高度(IE6)

描述：在IE6及以下版本中，部分块元素拥有默认高度(低于18px高度)

hack1:给元素添加声明：font-size:0;

hack2：给元素添加声明：overflow:hidden;

2)图片间隙

div中的图片间隙

bug：在块元素中插入图片时，有时图片会将块元素下方撑大三像素。

Hack：给

添加声明：display:block;

双倍浮向(双倍边距)

描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边的边界加倍显示。

hack:给浮动元素添加声明：display:inline;

4)表单元素行高不一致(IE,MOZ,C,O,S)

bug：表单元素行高对齐方式不一致

hack:给表单元素添加声明：float:left;

5)按钮元素默认大小及样式不一 致

hack1： 统一大小及样式/(用a标记模拟)

hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。

hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。

6)百分比bug

描述：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。

hack:给右面的浮动元素添加声明：clear:right; 意思：清除右浮动。

clear:left:清除左浮动

clear:both:清除两边的浮动

7)鼠标指针bug

描述：cursor属性的hand属性值只有IE8浏览器识别;

hack:如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;

auto默认

crosshair加号

text文本

wait等待

help帮助

progress过程

inherit继承

move移动

ne-resize向上或向右移动

pointer手形

8)透明属性

IE浏览器写法：filter:alpha(opacity=数值);取值范围 1-100(IE8以下)

兼容其他浏览器写法：opacity:数值;(数值的取值范围0-1,0.1,0.2,0.3-----0.9)

9)当li里的A加display:block或float:left时，出现行高不一致，有的会多出3像素；

hack1：给a加display：inline-block；

hack2：给a加display：inline;

Hack3：给li加float，并加宽度

10)当li加float属性，并且li里的A转换成块元素,并给a加了高度时，IE6里会出现每个LI单独占一行或阶梯状的情况；

hack1：不给a标签加高度；

Hack2：给a标签也添加float；

11)父元素里有块元素，如果给子元素添加添加margin-top,父元素会下来。

Hack1：给父元素添加overflow：hidden；

Hack2：给子元素添加float；

Hack3：给父元素加边框；

或者用其他的方法达到我们想要的效果：如给父元素加padding-top.

javascript ：

HTML对象获取问题

FireFox：document.getElementById(“idName”);

ie:document.idname或者document.getElementById(“idName”).

解决办法：统一使用document.getElementById(“idName”);