前端兼容性问题

最新推荐文章于 2023-05-17 01:59:52 发布

1学习者1

最新推荐文章于 2023-05-17 01:59:52 发布

阅读量809

点赞数

分类专栏：重要知识点 html JavaScript

本文链接：https://blog.csdn.net/u011280778/article/details/108953414

版权

JavaScript 同时被 3 个专栏收录

32 篇文章 1 订阅

订阅专栏

html

12 篇文章 1 订阅

订阅专栏

重要知识点

3 篇文章 0 订阅

订阅专栏

一、CSS

1、浏览器的兼容性问题-CSS 盒子模型(Box Model)

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。

解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

box-sizing 用来告诉浏览器该使用哪种盒模型来渲染文档。

content-box 是默认的盒子模型，即 W3C 标准盒子模型，现如今所有主流浏览器都支持并使用该模型渲染布局，包括 IE。但麻烦却是一堆堆的，因为，在这模型下，border与padding的设置会破坏元素的尺寸，导致最终展现出来的布局效果并不符合理想效果，而如果想要达到理想效果，又需要去计算宽高，非常麻烦。

（别的属性是越标准越好用，但这个属性却是反向向IE标准的）

而 border-box 则指 IE盒子模型，也称为“怪异盒子模型”。此模型下，边框和填充并不会影响元素的宽高，相当于是将元素的空间霸占成自己的空间，元素总体大小不变，内容空间变小，边框、填充则霸占着原本属于内容空间的地方。这在平时设计布局时，就非常的舒服，因为在指定元素尺寸并设置该属性值后，元素尺寸就不会因被破坏而又得重新计算了。

2、浏览器的兼容性问题-左右对齐使用 position: absolute方式或者 float 方式

当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。这样可以避免在不同的浏览器中出现可见的差异。当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是 <div class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明。

当使用浮动属性（float）对齐,总是包括 !DOCTYPE 声明!如果丢失,它将会在 IE 浏览器产生奇怪的结果。

3、浏览器的兼容性问题-列表样式（ul li）

IE和Opera显示图像标记比火狐，Chrome和Safari更高一点点。

如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下

ul
{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

4、浏览器的兼容性问题-opacity（透明度）

IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。

IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。

{
  opacity:0.4;
  filter:alpha(opacity=40); /* IE8 及其更早版本 */
}

5、浏览器的兼容性问题-CSS3

Internet Explorer 10, Firefox, 和 Opera支持transform 属性.

Chrome 和 Safari 要求前缀 -webkit- 版本.

注意： Internet Explorer 9 要求前缀 -ms- 版本

-transform（转换）

{
	transform:rotate(30deg);
	-ms-transform:rotate(30deg); /* IE 9 */
	-webkit-transform:rotate(30deg); /* Safari and Chrome */
}

-transition（过渡）

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

-animation（动画）

{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
	from {background:red;}
	to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	from {background:red;}
	to {background:yellow;}
}

-Gradients（渐变）

{
    height: 200px;
    background-color: red; /* 不支持线性的时候显示 */
    background-image: linear-gradient(to bottom right, red , yellow);
}

-字体文件格式

Internet Explorer 9 只支持 .eot 格式的字体.

@font-face
{
	font-family: myFirstFont;
	src: url('Sansation_Light.ttf')
		,url('Sansation_Light.eot'); /* IE9 */
}

CSS3 多列属性

div {
    /*多列*/
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    /*列宽度*/
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
    /*列间隙*/
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    /*列间隙边框*/
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
} 

h2 {
    /*标题跨越多少列*/
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}

CSS3 用户界面（resize、box-sizing、outline-offset）

Internet Explorer和opera 不兼容 resize属性

Internet Explorer 也不兼容 outline-offset属性

css3 flex box（弹性盒子）

.flex-container{
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;

    -webkit-justify-content: flex-end;
    justify-content: flex-end;

    -webkit-align-items: stretch;
    align-items: stretch;

    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

6、浏览器的兼容性问题-HTML5

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：

<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

载入后，初始化新标签的CSS：


/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

二、JavaScript

1、浏览器的兼容性问题-addEventListener()

IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

实例

跨浏览器解决方法:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

2、浏览器的兼容性问题-Window 尺寸

有三种方法能够确定浏览器窗口的尺寸。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

var w=window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;

var h=window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;

3、设备的兼容性问题-Javascript 判断是移动端浏览器还是 PC 端浏览器

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    document.write("移动")
} else {
    document.write("PC")
}

4、设备的兼容性问题-JavaScript 判断是否微信浏览器

function is_weixn(){  
    var ua = navigator.userAgent.toLowerCase();  
    if(ua.match(/MicroMessenger/i)=="micromessenger") {  
        return true;  
    } else {  
        return false;  
    }  
}  

if( is_weixn() ) {
    document.write("微信浏览器")
} else {
    document.write("其他浏览器")
}

1学习者1

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端兼容性问题

1、addEventListener()IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:element.attachEvent(event, function);element.detachEvent(event, function);实例跨浏览器解决方法:var x = document.
复制链接

扫一扫