不同操作系统及浏览器的兼容性

最新推荐文章于 2022-04-07 17:34:56 发布

Litwak

最新推荐文章于 2022-04-07 17:34:56 发布

阅读量5.0k

点赞数 1

分类专栏： Html 文章标签：浏览器 JavaScript

本文链接：https://blog.csdn.net/u013475983/article/details/73571876

版权

Html 专栏收录该内容

8 篇文章

订阅专栏

客户端检测

浏览器厂商投入了大量精力实现公共接口，但每一种浏览器都有各自的优缺点。面对这些问题，要么采取迁就策略，要么利用各种客户端检测方法突破种种局限性。
浏览器之间的差异，和各自的怪癖，多到不胜枚举。客户端检测是一种补救措施。
不到万不得己，不建议用客户端检测，应找到更通用的方法，优先使用。

能力检测

能力检测的目标不是识别浏览器，而是识别浏览器的能力。

//能力检测基本模式
if(object.propertyInquestion){
    //使用object.propertyInquestion
}

举例说明：IE5之前的版本不支持document.getElementById()。支持document.all 。可以这样实现能力检测：

function getElement(id){
    if(document.getElementById){
        return document.getElementById(id);
    }else if(document.all){
        return document.all[id];
    }else{
        throw new Error("No this Function");
}

更可靠的能力检测

例如测试任何对象的某个特性是否存在：

function isHostMethod(object,property){
    var type = typeof object[property];
    return t == 'function'||
            (!!(t == 'object'&&object[property]))||
            t == 'unknown';
}

能力检测不是浏览器检测，浏览器可能互相支持一些特殊能力。

用户代理检测

用户代理检测通过检测“用户代理字符串”来确定使用的浏览器。用户代理检测应少用，应为有电子欺骗。代理检测相关代码已发布到GITHUB上。

说明

LiveJs将持续更新，提供能力检测公共函数，致力于解决浏览器兼容问题

不同浏览器中CSS样式区别

外边界和内填充

问题表现：不加样式控制下，margin和padding差异较大
解决方案：css里 *{margin:0; padding:0;}
备注：这是最常见也是最易解决的一个兼容问题，几乎所有的css文件开头都会用通配符*来设置各个标签外边界和内填充为0

IE6边距bug1

说明 :块属性标签float后，又有横向的margin时，IE6显示margin比设置的大。
问题表现：IE6后面的一块被顶到下一行
解决方案：在float的标签样式控制中加入display:inline;转化为行内属性
备注：横向浮动的div布局，使用上margin进行边界设置时，必然会碰到此问题

IE6间距bug2

说明 :行内属性标签，设置display:block后采用float布局，又有横向的margin情况。
问题表现：IE6的间距比超过设置的间距
解决方案：在display:block;后面加入display:inline;display:table;
备注：行内属性标签，为了设置宽度，需要设置为display:block;(表单元素除外)在用float布局且有横向margin后，在IE6下，就具有了块属性float后的横向margin的bug。由于设置为display:inline，高度失效，所有在后面补上display:table。

height小于10px

说明：设置较小高度标签(一般小于10px)，在IE6、IE7，遨游中高度超出设置高度值
问题表现：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度
备注：一般出现在设置小圆角背景的标签里。出现该问题原因是IE8之前的浏览器都会给标签一个最小默认行高的高度，即使标签是空内容，标签的高度还是会有默认行高。

图片默认有间距

问题表现：几个img标签放在一块，有些浏览器会有默认的间距，有通配符也不起作用
解决方案：使用float属性为img布局
备注：img标签是行内属性标签，只要不超出容器高度，img会排在一行里，使用float是比较好的选择

标签最低高度设置min-height不兼容

问题表现：min-height本身就是一个不兼容的css属性，所以设置min-height时不能兼容所有浏览器
解决方案：如果设置一个标签最小高度为200px，需要进行设置 {min-height:200px; height:auto !important;
height: 200px; overflow:visible;}
备注：b/s系统前端时，当内容小于一个值时，容器的高度保持该值，当内容大于该值时，高度自适应且不出现滚动条。