Css兼容问题

样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.
CSS Hack: CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，修补bug的方法
Filter:表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是hack方法中的一种；

IE6常见CSS解析Bug及hack（解决方法）

1.默认高度（IE6）

描述：在IE6及以下版本中，部分块元素拥有默认高度（低于18px高度）
hack1:给元素添加声明：font-size:0;
hack2：给元素添加声明：overflow:hidden;

2.图片间隙
div中的图片间隙

bug：在块元素中插入图块状元素片时，有时图片会将块元素下方撑大三像素。
Hack：将转为，给添加声明：display:block;

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

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

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

bug：表单元素行高对齐方式不一致
hack:给表单元素添加声明：float:left;

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

hack1： 统一大小及样式/（用a标记模拟）
hack2:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。

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.
12.Fliter（过滤器）方法兼容浏览器

- _下划线：IE6浏览器的兼容符号； （只有IE6浏览器识别此符号，其他浏览器不识别）
        语法：选择器｛_属性：属性值；｝

- *或+：兼容所有IE7以下浏览器；（只有IE7及以下版本浏览器识别此符号，其他浏览器不识别）
        语法：选择器｛*属性：属性值; +属性：属性值; ｝

- \0：IE8及以上浏览器的兼容符号；
        语法：选择器｛属性：属性值\0;｝

- \9：兼容所有IE浏览器；
        语法：选择器｛属性：属性值\9｝（只有IE浏览器识别此符号，其他浏览器不识别）

js兼容问题

1.各浏览器下 scrollTop的差异
IE6/7/8：
对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度；
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop；
Safari:
safari 比较特别，有自己获取scrollTop的函数： window.pageYOffset ；
Firefox:
火狐等等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop ；
*完美的获取scrollTop 赋值短语：

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;*

2.关于使用 firstChild,lastChild 等，获取第一个/最后一个元素节点时产生的问题
--IE6-8下: firstChild,lastChild,nextSibling,previousSibling,获取第一个元素节点
--高版本浏览器下: firstElementChild,lastElementChild,nextElementSibling,previousElementSibling

var firstChild = oBox.firstChild || oBox.firstElementChild;

3.**获取样式 currentStyle 和 getComputedStyle **
IE: currentStyle
Chrome: getComputedStyle

function getStyle(obj,attr){
    if(window.getComputedStyle){
        return getComputedStyle(obj,null)[attr];
    }
    return obj.currentStyle[attr];
}

4.事件对象
ie低版本：window.event

var evt = e || window.event;

5.获取事件源
ie : event.srcElement
firefox : event.target

var _target = evt.target || evt.srcElement;

6.添加事件监听器attachEvent/attachEventLister
IE8以下用: attachEvent
Chrome,IE9-10用: attachEventLister

           //添加事件
           function addEvent(obj,type,fn){
               if(obj.addEventListener){
                   obj.addEventListener(type,fn,false);
               }else{
                   obj.attachEvent("on"+type,fn);
               }
           }
           //移除事件
           function removeClass(obj,type,fn){
               if(obj.removeEventListener){
                   obj.removeEventListener(type,fn)
               }else{
                   obj.detachEvent("on"+type,fn);
               }
           }

7.document.getElementByClassName()：根据类名查找元素，返回集合（IE9及以上版本支持）

function getByClassName(className, context) {
       　　context = context || document;
       　　if (document.getElementsByClassName) // 浏览器支持使用 getElementsByClassName
             　　 return context.getElementsByClassName(className);
       　　/* 不支持使用 getElementsByClassName */
       　　// 保存查找到的元素的数组
      　　 var result = [];
       　　// 查找 context 后代的所有元素
       　　var allTags = context.getElementsByTagName("*");
       　　// 遍历所有的元素
       　　for(var i = 0, len = allTags.length; i < len; i++) {
              // 获取当前遍历元素使用的所有 class 类名
              var classNames = allTags[i].className.split(" ");
              // 遍历当前元素的所有类名，和待查找的类名比较
              for (var j = 0, l = classNames.length; j < l; j++) {
                     if (classNames[j] == className) { // 当前所在遍历的元素是要查找出来的其中一个
                            result.push(allTags[i]);
                            break;
                     }
              }
       }
       // 返回查找结果
       return result;
}

8.阻止事件冒泡
stopPropagation()和cancelBubble，前者是方法，是标准的写法，后者是属性，赋值true表示阻止，是IE的写法。

if(evt.stopPropagation){
    evt.stopPropagation();
}else{
    evt.cancelBubble = true;
}

9.阻止默认行为兼容
ie : returnValue
其他浏览器：preventDefault

event.preventDefault?event.preventDefault():event.returnValue=false;
或者直接在事件处理程序中return false;

10.获取用户按下的键值

console.log(evt.keyCode || evt.which);

浏览器兼容

Css兼容问题

IE6常见CSS解析Bug及hack（解决方法）

js兼容问题

你可能感兴趣的:(浏览器兼容)