最近几天总是遇到兼容问题,就整理了一下javaScript和html、css出现的常见兼容。有不全面或不对的欢迎大家指正。也希望这条博客可以帮到一些刚学习的前端的朋友。

一、javaScript出现的兼容问题

1、DOM样式操作
获取行内/非行内样式(不能用来设置,只能获取)
    正常浏览器写法:
                  getComputedStyle(element, false).attr 获取外部样式,false表示不是伪类。(IE9可以,IE8以下不支持)
    IE浏览器写法:
                  element.currentStyle.attr

  // function getStyle(ele,attr){                 //ele元素,attr属性
if (ele.currentStyle) {
return ele.currentStyle[attr];
} else {
return getComputedStyle(ele, false)[attr];
}

2、事件对象的获取
    正常浏览器:事件处理函数的第一个参数  ( eve)
    IE浏览器:通过window找event属性   (window.event)
    兼容写法:

  element.onclick = function (eve) {
var e = eve || window.event;
console.log(e);
}

3、键盘事件对象
    正常浏览器:e.keyCode
    IE: e.which
    兼容写法:

     document.onkeydown = function (eve) {
var e = eve || window.event;
var code = e.keyCode || e.which;
}

4、阻止事件冒泡
    当内层元素的事件被触发时,会依次向上触发所有父级的相同事件
    正常浏览器:e.stopPropagaction
    IE浏览器:e.cancelBubble=true
    兼容写法:封装一个名为stopBbble的函数

function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}

5、阻止默认事件
    系统提供了都属于默认
    正常浏览器:e.preventDefault()
    IE浏览器:e.returnValue=false
    兼容写法:

function stopDefault(e){
if(e.preventDefault){
e.preventDefault()
}else{
e.returnValue = false;
}
}

6、事件委托target的兼容
    // 将多个子元素的相同事件,加给共同的现有的父元素,实现节省事件的目的
    正常浏览器:e.target
    IE浏览器:e.srcElement
    兼容写法:

var target=e.target||e.srcElement

7、绑定事件与删除事件

正常浏览器写法:
  监听式绑定事件(可以重复绑定事件区别于赋值式)


obox.addElementListener=("click",function(){
console.log("hello");
},false)

  删除监听式绑定事件

obox.addElementListener=("click",fn1,flase)
  function fn1(){
    console.log(2);
  }
obox.removeElementListener=("click",fn1,false);

IE浏览器写法
     绑定事件:

obox.attachEvent("onclick", function(){
        console.log(1);
    })

  删除事件

obox.detachEvent("onclick",fn1)

绑定事件的兼容写法:

function addEvent(ele,type,cb){      //ele参数   type事件类型  cb回调函数
  if(ele.attachEvent){
  ele.attachEvent("on"+type,cb)
}else{
  ele.addEventListener(type,cb,false)
}
}

删除事件的兼容写法

function removeEvent(ele, type, cb) {
  if (ele.detachEvent) {
    ele.detachEvent("on" + type, cb)
  } else {
    ele.removeEventListener(type, cb, false)
  }
}

二、下面是css和html的一些常见的兼容

1、双倍浮动BUG:

描述:块状元素设置了float属性后,又设置了横向的margin值,在IE6下显示的margin值要比设置的值大;

解决方案:给float的元素添加 display:inline;将其转换为内联元素;

2、表单元素行高不一致:

解决方案:

   a、给表单元素添加vertical-align:middle;

   b、给表单元素添加float:left;

3、IE6(默认16px为最小)不识别较小高度的标签(一般为10px):

解决方案:

  a、给标签添加overflow:hidden;

  b、给标签添加font-size:0;

4、图片添加超链接时,在IE浏览器中会有蓝色的边框:

解决方案:

  给图片添加border:0或者border:none;

5、最小高度min-height不兼容IE6;

解决方案:

  a、min-height:100px;_height:100px;

  b、min-height:100px;height:auto!important;height:100px;

6、图片默认有间隙:

解决方案:

  a、给img添加float属性;

  b、给img添加display:block;

7、按钮默认大小不一:

解决方案:

  a、如果按钮是一张图片,直接用背景图作为按钮图片;

  b、用a标记模拟按钮,使用JS实现其他功能;

8、百分比BUG:

描述:父元素设置100%,子元素各50%,在IE6下,50%+50%大于100%;

解决方案:

  给右边的浮动元素添加clear:right;

9、鼠标指针BUG:

  cursor:hand 只有IE浏览器识别;

  cursor:pointer;IE及以上浏览器和其他浏览器都识别(手型);

10、透明度设置,IE不识别opacity属性:

解决方案:

  标准写法:opacity:value;(取值范围0-1);

  兼容IE浏览器 filter:alpha(opacity=value);(取值范围1-100);

11、上下margin重叠问题:

描述:给上面的元素设置margin-bottom,给下面的元素设置margin-top,只能识别其中较大的那个值;

解决方案:  

  a、margin-top和margin-bottom 只设置其中一个值;

  b、给其中一个元素再包裹一个盒子,并设置over-flow:hidden;

12、给子元素设置margin-top.应用在了父元素上:

解决方案:

  a、把给子元素设置的margin-top改为给父元素设置padding-top;

  b、给父元素设置1px的border,即border-top:1px solid transparent;

  c、给父元素设置over-flow:hidden;

  d、给父元素设置float:left;

javaScript与css、html常见的兼容的更多相关文章

  1. JavaScript中几种常见的兼容问题及解决方案

    在js中好用的东西一般都存在兼容问题,以下,我整理了一些常用的兼容处理方法,自己用的时候可以把他们放在一个JS文件中,需要用到时候直接引入,会比较方便. 一.获取非行内样式 function getS ...

  2. div+css中常见的浏览器兼容性处理-兼容不同浏览器

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...

  3. 重温JavaScript获取CSS样式的方法(兼容各浏览器)

    众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...

  4. 前端html、Javascript、CSS技术小结

    简单地总结了一下前端用过的html.javascript.css技术,算是清点一下,做个大略的小结,为进一步的学习给个纲领. 一.HTML 由于HTML5的兴起,简单地判断一个网页是否是html5网页 ...

  5. 5种JavaScript和CSS交互的方法

      分享   分享   分享   分享   分享   随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需 ...

  6. 5种你未必知道的JavaScript和CSS交互的方法

    随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.css ...

  7. HTML文档中使用JavaScript和css

    HTML文档中使用JavaScript和css 引入css 内嵌式引入:将css代码写在HTML中的style标签里面 <!DOCTYPE html> <html> <h ...

  8. IE常见的兼容处理

    IE常见的兼容处理 1. 禁用IE兼容模式 为了保证IE能够使用最新渲染模式而不是兼容模式,在html文档头部应加入以下代码: <head> <meta charset=" ...

  9. 使用javascript和css模拟帧动画的几种方法浅析

    我们平时在开发前端页面的时候,经常会播放一段帧序列.这段帧序列就像gif图片那样,反复循环播放.那大家可能会说,直接用gif图片就好了,干嘛还去模拟呢?那是因为要做得更加灵活,我们要做到以下几点: 1 ...

随机推荐

  1. tomcat闪退的解决思路

    用Tomcat总会遇到启动Tomcat闪退的问题. 什么叫闪退啊,就是闪一下,就退出了控制台. 都闪退了,为啥闪退也不知道呀,又没有错误信息,所以就要先阻止闪退,先看到错误信息,知道启动不起来的原因. ...

  2. .net core - 配置管理 - json文件配置

    Json 文件配置 public class Startup { public Startup(IHostingEnvironment env) { var builder = new Configu ...

  3. Math基础使用

    /* java.lang.Math类是数学相关的工具类,里面提供的大量静态方法,完成与数学运算的操作 public static double abs(double num):获取绝对值. publi ...

  4. RESTful规范总结

    思维导图xmind文件:https://files-cdn.cnblogs.com/files/benjieming/RESTful%E8%A7%84%E8%8C%83.zip

  5. 【转载】C#使用typeof运算符获取对象变量的具体类型Type

    在C#的实际类型操作过程中,有时候需要通过typeof方法获取对象的类型对应的Type变量即具体类型,例如在获取DataTable中某一列的具体数据类型的时候,我们就会用到typeof方法来获取具体的 ...

  6. EHLIB 安装方法

    Ehlib安装方法  路人甲 2010-05-05 23:01:37 安装文件自带的Readme.txt中的安装过程如下: 1. Delphi 5.x - 7.x, Delphi 9.X Win32, ...

  7. git分支的衍合

    一般我们使用衍合的目的,是想要得到一个能在远程分支上干净应用的补丁 — 比如某些项目你不是维护者,但想帮点忙的话,最好用衍合:先在自己的一个分支里进行开发,当准备向主项目提交补丁的时候,根据最新的 o ...

  8. HTML网页实现flv视频播放

    一.HTML代码如下: <div id="player"></div> 二.JavaScript代码如下: <script src="htt ...

  9. Android 一个TextView中设置多种不同大小的字体,设置超链接

    以前项目中要是遇到这样的UI设计,都是傻不拉唧的分为三个TextView来实现,今天在微信中无意中看了一篇公众号文章,发现原来只要一个TextView就可以搞定啦,人生最悲哀的事情莫过于工作了这么久啦 ...

  10. 百度地图API操作实战

    什么是百度地图API: 百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口,包括JavaScript API,web服务API,Android等多种开发工具服务.提供基本地图展现,搜索, ...