设置浏览器兼容

浏览器兼容

css兼容

  1. cursor定义手型
     Firefox不支持hand,IE支持pointer
     解决方法:统一使用pointer
  2. css透明
     IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)
     Firefox:opacity:0.6
     解决方法:1.使用background:rgba(0,0,0,0.6) IE8及以下无效
          2.使用定位,背景色与子元素处于同级关系
  3. width和padding
     IE7和Firefox中宽度不包括padding,IE6中包括padding
  4. 盒模型的区别(Firefox和IE)
     box.style{width:100px;border:1px}
     IE:box.width = 100px
     Firefox:box.width = 100 + 1*2 = 102(加边框)
     解决方法:div{margin:30px!important;margin:28px}(不可写反)
     原因:IE不能识别!important,解析结果为div{marign:30px;margin:28px}
  5. 盒模型区别(IE5和IE6)
     IE5下div{width:200px;margin:0 10px}
     div宽度被解析为200(总宽度) - 10(左填充) - 10(右填充)
     IE6及其他浏览器被解析为 200 + 10 + 10
     解决方法:div{width:200px!important;width:240px;margin:0 10px}
  6. ul和ol列表缩进问题
     IE:设置margin:0px可以去除列表上下左右缩进、空白、列表编号和圆点,padding无效果
     Firefox:设置margin:0px去除上下空白,padding:0px去除左右缩进,list-style:none去除编号和圆点
     解决方法:统一设置list-style:none;margin:0;padding:0;
  7. 元素水平居中问题
     IE:设置父级{text-align:center}
     Firefox:margin:0 auto
     解决方法:同时设置父级和自身属性
  8. div实现垂直居中
     vertical-align:middle; line-height:(父级高度)
     缺点:需要控制内容不换行
  9. margin加倍的问题
     设置为float的div在IE下设置的margin会加倍
     解决方法:设置display:inline
  10. IE的宽高问题
     IE没有min-width和min-height的属性
     解决方法:#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto;min-width: 80px; min-height: 35px;}
  11. 页面的最小宽度
     IE不识别min
     解决方法:1.#container{ min-width: 600px; width:expression(document.body.clientWidth< 600? “600px”: “auto” );}
          2.使用js判断实现最小宽度
  12. div浮动IE产生3px的间距
     左边对象浮动,右边采用外补丁的左边距定位,右边对象内的文本会离左边有3px的间距
     解决方法:左边对象设置margin-right:-3px
  13. 对齐文本与文本输入框
     vertical-align:middle(除了IE,其他都适用)
  14. li内容过长后使用省略号代替
     li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;}
     (除了Firefox,其他都适用)
  15. web标准中IE无法设置滚动条颜色的问题
     解决方法:使用html替换body
  16. 无法定义1px高度的容器
     原因:IE6下因为默认的行高造成的
     解决方法:overflow:hidden/zoom:0.08/line-height:1px
  17. 设置层显示在flash之上
     解决方法:将flash设置透明
     写法:
  18. 超链接(a标签)设置边框和背景
     解决方法:设置display:block,float:left保证不换行
  19. 超链接(a标签)访问后hover样式消失问题
     解决方法:修改顺序 L-V-H-A
     书写方式:a:link{} -> a:visited{} -> a:hover{} -> a:active{}
  20. form标签
     IE:自动添加margin
     Firefox: margin:0
     解决方法:设置margin和padding ul,form{margin:0;padding:0}
  21. 属性选择器(css隐藏bug)
     p[id]{} div[id]{}
     p[id]属性选择器,所有p标签带有id的都是同样式
  22. Firefox文本无法撑开容器高度(实现固定高度允许被撑开)
     标准浏览器:固定高度值不会被撑开
     IE:固定高度值可以被撑开
     解决方法:div{height:100px!important;height:100px;min-height:100px;}
  23. Firefox和IE对空格尺寸的解释
     Firefox:空格尺寸4px ;忽略div与div之间的空格
     IE:空格尺寸8px ;不会忽略div与div之间的空格
  24. 条件注释
    
    
    
    lte -- 小于等于
    lt  -- 小于
    gte --  大于等于
    gt  --  大于
    ! --  不等于  
    
  25. 强制渲染
    //这句话的意思是强制使用IE7模式来解析网页代码!  
      
    //Google Chrome Frame也可以让IE用上Chrome的引擎  
     或者  
    //强制IE8使用IE7模式来解析  
      
    //强制IE8使用IE6或IE5模式来解析  
    //一个特定版本的IE支持所要求的兼容性模式多于一种  
    
  26. 字体大小定义不同
     问题症状:对字体大小small定义不同,Firefox为13px,而IE为16px,差别比较大 
     解决方法:使用指定的字体大小如14px或者使用em
    js兼容

  1. HTML获取节点问题
     fireFox:document.getElementById(‘idName’)
     IE:document.getElementById(‘idName’) / document.idName
     解决方法:统一使用document.getElementById(‘idName’)
  2. 变量名声明问题
     FireFox:const、var、let
     IE:var
     解决方法:统一使用var
  3. event.x与event.y问题
     IE:event对象有x、y属性,没有pageX、pageY属性
     FireFox:event对象有pageX、pageY属性,没有x、y属性
     解决方法:使用mX(mX = event.x?event.x:event.pageX)替代属性
  4. window.location.href问题
     IE、FireFox2.0x可以使用window.location和window.location.href属性
     Firefox1.5x及以下只能使用window.location
     解决方法:统一使用window.location.href
  5. frame问题
    (1)访问frame对象
     统一写法:window.document.getElementById(‘frameId’)
    (2)切换frame内容
     统一写法:1. window.document.getElementById(‘frameId’).src = url
          2.window.frameName.location = url
     传递参数(子传父):使用parent属性
  6. 模态和非模态窗口问题
     IE:showModalDialog(打开模态窗口)、showModelessDialog(打开非模态窗口),FireFox不支持
     解决方法:直接使用window.open(pageURL,name,parameters)方式直接打开窗口
  7. FireFox与IE的父元素(parentElement)的区别
     IE:obj.parentElement、obj.parentNode
     FireFox:obj.parentNode
     解决方法:统一使用obj.parentNode获取父元素(父节点)
  8. document.formName.item(‘itemName’)问题
     IE:document.formName.item(‘itemName’)或document.formName.elements[‘elementName’]
     FireFox:document.formName.elements[‘elementName’]
     解决方法:统一使用document.formName.elements[‘elementName’]
  9. 集合类对象问题
     IE:使用()或[]获取集合类对象
     FireFox:只能使用[]获取
     解决方法:统一使用[]获取
  10. 自定义属性问题
     IE:可使用获取常规属性的方法获取自定义属性,也可以使用getAttribute()
     Firefox:仅支持getAttribute()获取
     解决方法:统一使用getAttribute()获取自定义属性
  11. input.type问题
     IE:input.type属性为只读
     Firefox:input.type属性为读写
     解决方法:尽量不修改input.type属性;修改input.type属性使用替换方式(使用新的input替换之前的input)
  12. event.srcElement问题
     IE:event对象有srcElement属性,没有target属性
     Firefox:event对象有target属性,没有srcElement属性
     解决方法:使用srcObj = event.target ? event.target : event.srcElement
    注:考虑第8条问题,使用myEvent替换evnet
  13. 事件委托方法
     IE:使用document.body.onload = inject,其中function inject()已被实现
     Firefox:使用document.body.onload = inject() new Function (‘inject()’)
     解决方法:统一使用document.body.onload = new Function (‘inject()’) 或 document.body.onload = function(){}
  14. js兼容(IE)
    使IE5,IE6兼容到IE7模式(推荐)
    
    
    
    使IE5,IE6,IE7兼容到IE8模式
    
    
    
    使IE5,IE6,IE7,IE8兼容到IE9模式
    
    
       
    
  15. 建立单选钮
    IE以外的浏览器
    var rdo = document.createElement('input');
    rdo.setAttribute('type','radio');
    rdo.setAttribute('name','radiobtn');
    rdo.setAttribute('value','checked');
    IE:
    var rdo =document.createElement()
    解决办法:这一点区别和前面的都不一样。这次完全不同,所以找不到共同的办法来解决,那么只有IF-ELSE了;万幸的是,IE可以识别出document的uniqueID属性,别的浏览器都不可以识别出这一属性。问题解决。
    

你可能感兴趣的:(css,浏览器兼容,前端)