标签（空格分隔）： css的兼容 js的兼容
序
网页由前端三板斧组成，所以兼容也要从3个角度考虑，面试很反感问道：“你说说兼容问题？”相关的。圈里的人都懂，这个话题其实挺大的，你是让我从历史话题引起还是粗略一概而过，一概而过又怕你不满意，娓娓道来怕你烦。这个问题可大可小，而且前端人也最烦这个兼容，都按照W3C标准来不就得了嘛，非要只顾一己私利，毁了咱前端人吃饭碎觉打豆豆的时间。目前IE的使用量在10%+吧，所以兼容到这里还可以忍受。不管是优雅降级还是渐进增强，你自己根据站点相关信息做定夺吧。话锋回转，咱们开正题，从3个方面说兼容。
HTML
h5新增的语义化良好的99.99%都使用不了，不信到这家站点上查查
Paste_Image.png
注意IE即可：（没有别的意思哈。）毕竟曾经也是叱咤风云的老大哥，自己的标准自己定。老大就是标准嘛，只是现在此一时彼一时，大家都开始吐槽了。此刻你可以乖乖的用回h4的标签了，块级布局基本div，文本块使用h1-h6、p等，小块文字，装饰性的使用span，b、u、i就好。html部分的兼容是最好处理的，而且要是移动端，不需要注意语义问题的话，一路div谁还会管你呢。就不涉及兼容啦
CSS
CSS和JS的兼容处理的地方还是挺多的，前端人都吐槽的满大街都是，所以遇到了不要怕，网上资料一大把，所以面试官因为兼容的问题挂你，不去这家也罢了。这里理论就不多说，上一点代码块吧。
1 跨浏览器的透明
.transparent {
filter: alpha(opacity=50); /* IE */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera Google 等常规的*/
}
2 跨浏览器的全屏背景
html {
background: url('images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
3 跨浏览器的盒阴影
内部CSS3 盒阴影
#mydiv {
-moz-box-shadow: inset 2px 0 4px #000;
-webkit-box-shadow: inset 2px 0 4px #000;
box-shadow: inset 2px 0 4px #000;
}
外部CSS3 盒阴影
#mydiv {
-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
-moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
}
4 跨浏览器设置最小高度
#container {
min-height: 550px;
height: auto !important;
height: 550px;
}
5 IE6的PNG透明修复
.bg {
width:200px;
height:100px;
background: url(/img/logo.png) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/logo.png',sizingMethod='crop');
}
小结：
以IE为主的主要有hack说法，其实就是人家自家的一种书写格式，找文档，照写就是了，剩下对于CSS3新增加的一些属性，有些需要加上各自的私有前缀，比如：
以谷歌苹果浏览器为准的-webkit-；以火狐为准的-moz-；以欧朋为准的-o-
添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性.
JavaScript
JavaScript的兼容点还是挺多的，遇到了，具体问题具体分析。这里举几个常见的。
1> js获取非行内样式
var oDiv = document.getElementById("div1");
oDiv.onclick = function () {
//obj.currentStyle.height IE
//getComputedStyle(obj,null).height; 高级
if (this.currentStyle) {
alert("ie:" + this.currentStyle.height);
} else {
alert("高级:" + getComputedStyle(this, null).height);
}
};
2> js封装的Ajax的第一步中
//1 实例化一个请求对象
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
} else {
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
3> 获取文档的头部和左边的偏离位置--scroll存在浏览器兼容问题
/*
* 获取文档的头部和左边的偏离位置
* 使用: scroll().left scroll().top
*/
function scroll() {
if(window.pageXOffset != null){ // ie9+ 和 最新浏览器
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}else if(document.compatMode == 'CSS1Compat'){ // 标准浏览器
return{
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}else {
return{
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
}
/*在js中如何判断当前浏览器正在以何种方式解析？
document对象有个属性compatMode ,它有两个值：
BackCompat 对应quirks mode
CSS1Compat 对应strict mode */
/*历史原因:
当早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式) */
或者你还可以这么写，不要封装了：
// 监听屏幕的滚动 ---> 使用时直接写在事件监听里
window.onscroll = function () {
// 兼容的写法
var scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
var scrollLeft = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
}
4> js获取窗口滚动条高度、窗口可视范围高度、文档实际内容高度、滚动条离浏览器底部的高度
//获取窗口可视范围的高度
function getClientHeight(){
var clientHeight=0;
if(document.body.clientHeight&&document.documentElement.clientHeight){
var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
}else{
var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
}
return clientHeight;
}
//获取窗口滚动条高度
function getScrollTop(){
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop){
scrollTop=document.documentElement.scrollTop;
}else if(document.body){
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
//获取文档内容实际高度
function getScrollHeight(){
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
以上的调用使用方法：如下
window.onscroll=function(){
// 窗口可视范围的高度
var height=getClientHeight(),
// 窗口滚动条高度
theight=getScrollTop(),
// 窗口可视范围的高度
rheight=getScrollHeight(),
// 滚动条距离底部的高度
bheight=rheight-theight-height;
document.getElementById('show').innerHTML='此时浏览器可见区域高度为：'+height+'<br />此时文档内容实际高度为：'+rheight+'<br />此时滚动条距离顶部的高度为：'+theight+'<br />此时滚动条距离底部的高度为：'+bheight;
}
类似的对应jq获取窗口的滚动距离，高度。
$(window).scroll(function(event) {
//获取浏览器的scrollTop值
var scrollTop=$(window).scrollTop();
//浏览器的窗口高度
var vHeight=$(window).height();
//盒子的的距离首个无定位的父级的距离--offset
var offsetTop=$(".box2").offset().top;
console.log(vHeight+scrollTop-offsetTop);
});
小结
对于原生js书写你的站点，需要兼容的地方肯定多，但是如果你采用js的库之一——jQuery的话，那就美滋滋了。大家都知道jQuery的1.9版本之前是兼容IE6/7/8，这样看来你就可以安心书写逻辑性代码喽，不要考虑烦人的兼容。但是你的项目很小不想启用jQuery，那么当然你又不想根据项目自己定制一份阉割版的jQuery，对不起，兼容还是自己做吧。
后续做细致补充吧。-------------------喜欢就动动小手哈。--------麦壳-macrolam
网友评论