从html,css,javascript三方面谈谈“浏览器兼容性”的问题

javaScript

  1. IE、FireFox、Netscape等不同的浏览器里,对于document.body的clientHeight、offsetHeight 和 scrollHeight 有着不同的含义.
    clientHeight:在上述浏览器中, clientHeight 的含义是一致的,定义为网页内容可视区域的高度,即在浏览器中可以看到网页内容的高度,通常是工具条以下到状态栏以上的整个区域高度,与具体的网页页面内容无关。可以理解为,在屏幕上通过浏览器窗口所能看到网页内容的高度。
    offsetHeight:关于offsetHeight,ie和firefox等不同浏览中意义有所不同,需要加以区别。在ie中,offsetHeight 的取值为 clientHeight加上滚动条及边框的高度;而firefox、netscape中,其取值为是实际网页内容的高度,可能会小于clientHeight。
    scrollHeight:scrollHeight都表示浏览器中网页内容的高度,但稍有区别。在ie里为实际网页内容的高度,可以小于 clientHeight;在firefox 中为网页内容高度,最小值等于 clientHeight,即网页实际内容比clientHeight时,取clientHeight。

  clientWidth、offsetWidth 和 scrollWidth 的含义与上述内容雷同,不过是高度变成宽度而已。

  1. 标准的事件绑定方法函数为addEventListener,但IE下是attachEvent
  2. 事件的捕获方式不一致,标准浏览器是由外至内,而IE是由内到外,但是最后的结果是将IE的标准定为标准
  3. 我们常说的事件处理时的event属性,在标准浏览器其是传入的,IE下由window.event获取的。并且获取目标元素的方法也不同,标准浏览器是event.target,而IE下是event.srcElement
  4. 在低版本的IE中获取的日期处理函数的值不是与1900的差值,但是在高版本的IE中和标准浏览器保持了一致,获取的值也是与1900的差值
    比如:var year= new Date().getYear();
    解决
    //方式一
    var year= new Date().getYear();
    year = (year<1900?(1900+year):year);
    document.write(year);
    //方式二
    var year = new Date().getFullYear();
    document.write(year);
  5. innerText的使用
    分析原因:FF不支持innerText,它支持textContent来实现innerText,不过textContent没有像innerText一样考虑元素的 display方式,所以不完全与IE兼容。如果不用textContent,字符串里面不包含HTML代码也可以用innerHTML代替。Safari和Chrome对innerText和textContent都支持
    兼容处理
    通过判断不同浏览器做不同的处理
    if(document.all){

      document.getElementById('element').innerText = "mytext";  

    } else{

      document.getElementById('element').textContent = "mytext";  

    }

  6. Frame的引用
    IE可以通过id或者name访问这个frame对应的window对象;而FF只可以通过name来访问这个frame对应的window对象。
    【应用场景】
    在一个页面嵌套了一个iframe页面(下面简称父页面和子页面)。父页面取子页面的值。
    Js代码