天天看點

換工作之後需要相容ie8的我

以下是我ie8踩得坑,總結了一下,以免以後會遇到,雖然有的度娘也能搜到但是偶爾看看自己的文章也能學到很多(後續如有添加繼續補上)

1,ie8 input框建議不要使用line-height去撐高度,在ie下并不會實作文字垂直居中,用padding值去撐開

2,ie8浏覽器對特殊字元解析,(解決方法是用base64轉碼,有封裝好的函數,base64encode(utf16to8(filename))和base64_decode();)如果是url建議使用encodeURI(需注意的是使用encodeURI傳碼的時候需要傳兩次,否則不生效,背景URLDecoder () )

3,ie8浏覽器有時會出現空白頁(是因為頁面有不符合的注釋還有有的标簽在寫的時候木有閉合)

4,

自我遇見的問題,ie8下foreach不相容導緻亂碼

if (typeof Array.prototype.forEach != 'function') {

Array.prototype.forEach = function(callback){

for (var i = 0; i < this.length; i++){

callback.apply(this, [this[i], i, this]);

}

};

}

5,Bind不相容

(function(){

if (!Function.prototype.bind) {

Function.prototype.bind = function (oThis) {

if (typeof this !== "function") {

throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");

}

var aArgs = Array.prototype.slice.call(arguments, 1),//數組對象轉數組

fToBind = this,

fNOP = function () {},

fBound = function () {

return fToBind.apply(this instanceof fNOP && oThis

? this

: oThis,//用來測試一個對象在原型鍊中是否存在構造函數的prototype屬性

aArgs.concat(Array.prototype.slice.call(arguments)));//類數組對象

};

fNOP.prototype = this.prototype;

fBound.prototype = new fNOP();

return fBound;

};

}

}())

6,eval函數不支援特殊符号,如:eval(‘langZh.’+text);

7,function參數不能為表達式,如:function(flag=0)

8,box-shadow相容IE8寫法,使用filter濾鏡屬性實

-moz-box-shadow:3px 5px 5px #

969696

;

-webkit-box-shadow:3px 5px 5px #

969696

;

box-shadow:3px 5px 5px #

969696

;

filter: progid:DXImageTransform.Microsoft.Shadow(color=

'#cccccc'

,Direction=

180

, Strength=

3

);

//說明: direction是陰影方位(角度),strength是陰影大小(半徑),機關為度,可以為負數,color是陰影顔色 (盡量使用數字)

9,使IE8浏覽器支援背景半透明寫法,使用filter濾鏡屬性實作

background: rgba(

,

,

,

0.3

);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);

10,使用IE8浏覽器支援背景圖檔半透明opacity,使用filter濾鏡屬性實作

filter: alpha(opacity=100);

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

opacity: 1;

11,IE8浏覽器不支援數組的indexof()方法

// 添加數組IndexOf方法

if

(!Array.prototype.indexOf){

Array.prototype.indexOf=function(elt

/*,from*/

){

varlen=

this

.length>>>

;

varfrom=Number(arguments[

1

])||

;

from=(from<

)

?Math.ceil(from)

:Math.floor(from);

if

(from<

)

from+=len;

for

(;from<len;from++){

if

(frominthis&&

this

[from]===elt)

returnfrom;

}

return

-

1

;

};

}

12,不規則注釋導緻頁面在ie、360、谷歌浏覽器上不能正常顯示

例如:<!--的德的-->

13,

html标簽的拼寫一定要正确并且标簽一定要用一些常用的标簽,不要自己随意編寫,如<up></up>是錯誤的标簽,spn,spam,不符合規範的都會報錯,此問題出現的最多,必須要規範标簽寫法

  • 标簽正确且常用
  • 标簽成對
  • div嵌套要規範,嵌套層數太多時考慮有沒有必要,盡量層數清晰。