浏览器兼容
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：将<img>转为，给<img>添加声明：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);
