web前端 相容性問題

標籤：

1:position屬性使用過多或使用位置不恰當引起滾動時頁面錯亂

瀏覽器環境：ie7

position:relative;

網頁上最直接表現就是極具破壞性的滾動錯位，問題產生來自ie7自身渲染解析出錯；這個問題的解決方案沒有具體的代碼，盡量避免在過多層級中使用該屬性，絕對禁止為無需要無作用元素添加該屬性，如tr、td等

 

2: 跨瀏覽器的CSS透明度

.transparent {

opacity: 0.7;

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

filter: alpha(opacity=70);

-moz-opacity: 0.7;

-khtml-opacity: 0.7;

 

3.瀏覽器安全色——常用的css hack

（1）.title{ height:200px;

*height:200px;

_height:200px; }

（2）.title{ height:200px;

*height:200px !important;

*height:200px; }

（3）.title{ height:200px; }

*html.title{ height:200px;}

*+html.title{ height:200px;}

 

4.經常遇到的瀏覽器的相容性有哪些？原因，解決方案是什麼，常用hack的技巧 ？

* png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.* 瀏覽器預設的margin和padding不同。解決方案是加一個全域的*{margin:0;padding:0;}來統一。* IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設定的大。  浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}  這種情況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)  漸進識別的方式，從總體中逐漸排除局部。  首先，巧妙的使用“\9”這一標記，將IE遊覽器從所有情況中分離出來。  接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。  css      .bb{          background-color:#f1ee18;/*所有識別*/          .background-color:#00deff\9; /*IE6、7、8識別*/          +background-color:#a200ff;/*IE6、7識別*/          _background-color:#1e0bd1;/*IE6識別*/      }*  IE下,可以使用擷取常規屬性的方法來擷取自訂屬性,   也可以使用getAttribute()擷取自訂屬性;   Firefox下,只能使用getAttribute()擷取自訂屬性。   解決方案:統一通過getAttribute()擷取自訂屬性。*  IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;   Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。*  解決方案：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。*  Chrome 中文介面下預設會將小於 12px 的文本強制按照 12px 顯示,   可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。超連結訪問過後hover樣式就不出現了 被點擊瀏覽過的超連結樣式不在具有hover和active瞭解決方法是改變CSS屬性的排列順序:L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

web前端 相容性問題