首頁 > 開發者 > JavaScript
瀏覽器安全色問題與解決方案，瀏覽器安全色解決方案
瀏覽器安全色問題是指，不同廠商開發的瀏覽器針對同一段代碼的不同解析，造成頁面展示效果出現差異的情況，很多時候為了追求顯示效果的一直，前端開發人員就要針對不同相容問題應用相應的方法處理，達到效果一致的目的。
下面這些是平時開發過程中遇到的，做個匯總，方便查閱。
1、<!DOCTYPE HTML>文件類型的聲明產生條件：IE6瀏覽器，當我們沒有書寫這個文檔聲明的時候，會觸發IE6瀏覽器的怪異解析現象；解決辦法：書寫文檔聲明。2、橫向雙外邊距產生條件：在IE6中塊元素浮動後（左浮左margin，右浮右margin），會出現橫向雙倍margin現象。解決辦法：在float標籤的樣式控制中加入display：inline，或者左幅右margin，右浮左margin。3、預設行高產生條件：IE6\IE7遨遊瀏覽器；設定的文字高度超出盒模型內容地區設定的高度時會影響布局。解決辦法：給超出高度的標籤設定overflow：hidden；或將文字的行高line-height設定為小於塊的高度4、不同瀏覽器當中，很多的標籤的預設樣式不同，如預設的外補丁內補丁。產生條件：不同瀏覽器解決方案：利用CSS reset檔案進行樣式的清除，然後在根據需要進行設定。5、img外部的border產生條件：img外部有a標籤，即img標籤有連結時解決辦法：設定img邊框border：0；6、經典3像素bug產生條件：IE6瀏覽器，浮動塊元素與未浮動塊元素處於同一行，有預設的3px間距。解決辦法：設定非浮動元素浮動。7、png格式圖片產生條件：IE6瀏覽器，不支援透明；解決辦法：使用JavaScript進行處理；或者使用GIF、JPG映像替代掉png圖片的使用。8、預設行高產生條件：清浮動的時候，有些人會採取一種清浮動的方法，使用一個空的div，然後為這個div設定{clear：both}。在大部分瀏覽器當中，這樣做是沒有任何問題的，但是在IE6瀏覽器當中，div即使是空的，也會存在預設行高。解決方案：設定其高度為0，並設定overflow：hidden。{height：0；overflow：hidden；clear：both；}9、圖片預設有間距產生條件：img標籤（每個標籤後敲了斷行符號）解決方案：為img設定float的浮動布局方式。10、a標籤hover不適用於所有標籤產生條件：IE6瀏覽器中hover只支援a標籤的使用，不支援一切其它標籤使用；解決辦法：合理用a標籤嵌套其它行內標籤或者用JavaScript類比a的hover效果；11、table標籤當中border-color屬性設定無效產生條件：IE6中table設定屬性border-color無效；解決辦法：運用CSS樣式進行控制，而不是使用屬性進行樣式的處理。12、透明rgba與opacity產生條件：IE6不支援此兩種特命的設定方法；解決辦法：使用IE6當中的濾鏡filter替代掉，如：opacity：0.6；filter：alpha（opacity=60）13、子選取器在IE6中不能使用產生條件：IE6瀏覽器，使用E>F子選取器；解決辦法：採用其他選取器或者採用後代選取器進行控制，如div p{margin:10px;} div p p {margin:0;}替代掉div>p {margin:10px;}14、不支援最大最小寬度產生條件：IE6瀏覽器，標籤的最小高度、寬度設定（min/max-height）解決辦法：為IE6單獨設定hack，即_height：最小高度值；_width：最小寬度值（對於IE6，當實際寬高超出定義的寬高時，元素會自動調整寬高）。對於最大高度和最大寬度，沒有必要設定相容，當前對於開發人員來說，只需要保證IE6下正常顯示即可。無需在它身上花費太多功夫.target{ min-height:100px; height:auto!important; height:100px; // IE6下內容高度超過會自動擴充高度}15、縱向置中，IE6不支援display：table-cell產生條件：IE6瀏覽器，設定一個元素在另一個元素中垂直方向上置中對齊，不能夠支援以儲存格的方式來顯示元素；解決辦法：如果是單行文本，採用line-height和height的配合使得文本垂直置中，如果中間是其他元素或者多行文本，採用其他方法進行置中處理。16、input聚焦框顏色與樣式不同產生條件：各個瀏覽器表現不同；處理方法：使用outline：none，清除預設樣式之後再統一設定17、滑鼠移上小手效果產生條件：IE6,cursor:hand :IE完全支援。但是在Firefox是不支援的，沒有效果。cursor：pointer：是CSS2.0的標註。所以Firefox是支援的，但是IE5.0即之前版本不支援。IE6開始支援。解決辦法：設定兩種cursor：pointer；cursor：hand.18、子標籤無法撐開父標籤的高度產生條件：父標籤內部含一個或多個子標籤，父標籤沒有設定浮動，而子標籤發生浮動：處理方法：方法1：在子標籤最後添加清除浮動的設定<div>19、li的間距問題產生條件：IE6瀏覽器li標籤設定寬高，且li裡面的元素髮生了浮動；處理方法：方法1：li不設定寬高；方法2：li內部的標籤不進行浮動。
ol內
li的序號全為1，不遞增。解決方案：為li設定樣式
display: list-item;20、行內元素布局混了產生條件：行內元素為包含框時，如果包含框包含的絕對位置元素以百分比單位進行定位；處理方法：在行內元素當中加入{zoom：1}，出發IE的haslayout。21、多顯示一個字產生條件：多個浮動元素中間夾雜HTML備註陳述式，浮動元素寬度設定為100%；則在下一行多顯示一個上一行的最後一個字元；處理方法：果斷刪掉注釋！22、CSS優先順序 ！important產生條件：IE6當中，在同一組CSS屬性中，!important不起作用；處理方法：單獨設定23、img圖片下部高度多餘5px產生條件：IE6瀏覽器；處理方法：將圖片轉化為塊級對象，即display：block。還有四種其他方法，詳細解釋參見日誌：IE6BUG圖片元素img下高度超出，出現多餘空白。
讓 <div id="top">...</div> 元素固定在瀏覽器的底部和距離右邊的20個像素，代碼如下：
#top{ position:fixed; _position:absolute; bottom:0; right:20px; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
right 跟 left 屬性可以用絕對位置的辦法解決，而 top 跟 bottom 就需要用上面的運算式來實現。其中在_position:absolute;中的_符號只有 IE6 才能識別，目的是為了區分其他瀏覽器。
上面的只是一個例子，下面的才是最重要的程式碼片段：
使元素固定在瀏覽器的頂部#top{ _position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop));}/*使元素固定在瀏覽器的底部*/#top{ _position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
這兩段代碼只能實現在最底部跟最頂部，你可以使用 _margin-top:10px; 或者 _margin-bottom:10px;修改其中的數值控制元素的位置。
position:fixed; 閃動問題現在，問題還沒有完全解決。在用了上面的辦法後，你會發現：被固定定位的元素在滾動捲軸的時候會閃動。解決閃動問題的辦法是在 CSS 檔案中加入：
*html{ background-image:url(about:blank); background-attachment:fixed;}
其中 * 是給 IE6 識別的。
26、IE6 7 8不支援background-size
相容寫法：filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
'/image/xxx.jpg'
, sizingMethod=
'scale'
);27、IE6 7 z-index bug 自己層級儘管設定9999都不管用解決辦法：父級層級提高。28、IE6透明相容處理：
.filter { /*background: #ce4138; */ background: rgba(211, 66, 55, 0.93); filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#a3ce4138',endColorstr = '#eece4138' ); }
29、IE5-8不支援opacity,處理辦法：
.opacity{ opacity:0.4 filter:alpha(opacity=60);/* for IE5-7 */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";/* for IE 8*/}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
