前端兼容性问题
一、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("其他瀏覽器") }?
總結
- 上一篇： UnityShader之Shader分类
- 下一篇： 总结一年来的前端学习心得