IE瀏覽器相容問題總結

2022-06-29 06:42:08 字數 3825 閱讀 6315

引自掘金：

瀏覽器的盒子模型分為兩類：

標準的w3c盒子模型。 chrome、firefox、ie9、ie10、ie11的盒模型為標準盒模型。

ie6-8的盒子模型。多了offset。

解決方法：

​ 使用doctype宣告，讓瀏覽器使用標準模式
val= '2019-4-18' 想要獲取下一天的日期 也要返回該格式。

var dd = new date(val);


dd.setdate(dd.getdate()+1);//獲取adddaycount天後的日期


let y = dd.getfullyear() + '-';


let m = (dd.getmonth() + 1 < 10 ? '0' + (dd.getmonth() + 1) : dd.getmonth() + 1) + '-';


let d = (dd.getdate() < 10 ? '0' + dd.getdate() : dd.getdate()) + ' ';


return (y + m + d + '00:00:00');
ie中會報nan的錯誤 因為ie無法識別new date('2019-4-18')

val.setminutes(val.getminutes() - val.gettimezoneoffset() + 24 * 60); //獲取明天 需要多加24小時*60分鐘


return val.tojson().slice(0, 10) + ' 00:00:00'


element.addeventlistener('click', function(e){}, false);
w3c繫結的優點:w3c繫結的缺點:

element.attachevent('onclick', function(){});
ie方式的優點

ie方式的缺點

var eventshiv = ,


// type相容


gettype: function(event) ,


// target相容


gettarget: function(event) ,


// 新增事件控制代碼


addhandler: function(elem, type, listener) else if (elem.attachevent) else 


},// 移除事件控制代碼


removehandler: function(elem, type, listener) else if (elem.detachevent) else 


},// 新增事件**


addagent: function (elem, type, agent, listener) 


});},


// 取消預設行為


preventdefault: function(event) else 


},// 阻止事件冒泡


stoppropagation: function(event) else }};
或者：

*
在ie6 中設定浮動，同時又設定 margin，會出現雙倍邊距的問題。

display: inline;
/* ie6 hack */


*html, *html body 


*html #menu 


min-height: 350px;


height: 350px;
由於 background-size 是 css3 新增的屬性，所以 ie 低版本自然就不支援了，但是老外寫了乙個 htc 檔案，名叫 background-size polyfill，使用該檔案能夠讓 ie7、ie8 支援 background-size 屬性。其原理是建立乙個 img 元素插入到容器中，並重新計算寬度、高度、left、top 等值，模擬 background-size 的效果。

html 


body
問題：在ie 中 img 與文字放一起時，line-height 不起作用

解決：都設定成 float

cursor:hand;  /*ie瀏覽器*/


cursor: pointer;/*其他瀏覽器*/


-o-transform:rotate(7deg); // opera


-ms-transform:rotate(7deg); // ie


-moz-transform:rotate(7deg); // firefox


-webkit-transform:rotate(7deg); // chrome


transform:rotate(7deg); // 統一標識語句


var inp = document.getelementbyid('inp')


var result = document.getelementbyid('result')


function getkeycode(e) 


inp.onkeypress = function(e) 


// 瀏覽器視窗可視區域大小（不包括工具欄和滾動條等邊線）


// 1600 * 525


var client_w = document.documentelement.clientwidth || document.body.clientwidth;


var client_h = document.documentelement.clientheight || document.body.clientheight;


// 網頁內容實際寬高（包括工具欄和滾動條等邊線）


// 1600 * 8


var scroll_w = document.documentelement.scrollwidth || document.body.scrollwidth;


var scroll_h = document.documentelement.scrollheight || document.body.scrollheight;


// 網頁內容實際寬高 (不包括工具欄和滾動條等邊線）


// 1600 * 8


var offset_w = document.documentelement.offsetwidth || document.body.offsetwidth;


var offset_h = document.documentelement.offsetheight || document.body.offsetheight;


// 滾動的高度


var scroll_top = document.documentelement.scrolltop||document.body.scrolltop;

IE瀏覽器相容問題

解決方法 各個版本的分析 x ua compatible是針對ie8新加的乙個設定，對於ie8以下的瀏覽器是不識別的，這個區別與 content ie 7 在無論頁面是否包含指令，都像是使用了 windows internet explorer 7的標準模式。而content ie emulatei...

IE瀏覽器相容問題

1.flex direction column 不豎向排列 解決方案 在ie中，flex direction column和align item不能同時使用,需要把align item刪掉 2.位置偏移 解決方案 在高版本瀏覽器中使用了position absolute，有時候只指定top或left...

IE瀏覽器相容問題

1.ie不相容透明度opacity 首先說明一點，ie9以上版本支援opacity屬性 包括ie9 親測過 實現相容 active2.ie不相容圓角border radius ie9及以上可支援，ie8及以下不能支援 3.ie不相容background sizeie9以下不支援此屬性，首先說下bac...