资讯专栏INFORMATION COLUMN

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

Kaede / 440人阅读

摘要:可以理解为,在屏幕上通过浏览器窗口所能看到网页内容的高度。都表示浏览器中网页内容的高度,但稍有区别。解决等浏览器不支持标签的问题高版本的浏览器用了低版本的浏览器无法识别的元素,从而导致不能解析。这时候我们就会面临这个兼容性问题。

javaScript

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 的含义与上述内容雷同,不过是高度变成宽度而已。

标准的事件绑定方法函数为addEventListener,但IE下是attachEvent

事件的捕获方式不一致,标准浏览器是由外至内,而IE是由内到外,但是最后的结果是将IE的标准定为标准

我们常说的事件处理时的event属性,在标准浏览器其是传入的,IE下由window.event获取的。并且获取目标元素的方法也不同,标准浏览器是event.target,而IE下是event.srcElement

在低版本的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);

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";  

}

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