筆記：html常見的兼容問題
阿新 • • 發佈：2018-10-14
span ie瀏覽器 code 發生 點擊 定義 pagex htm 不支持
漏寫 DTD 聲明，Firefox 仍然會按照標準模式來解析網頁，但在 IE 中會觸發怪異模式。 為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫 DTD 聲明的好習慣。 現在可以使用[html5](http://www.w3.org/TR/html5/single-page.html) 推薦的寫法：
IE：
IE的雙邊距bug：
塊級元素float後設置橫向的margin，IE6顯示的margin比較大。
解決辦法：display：inline
雙邊距bug：在IE6下，如果對元素設置浮動，同時又設置了margin-left或margin-right，margin值會加倍
#box{ float:left; width:10px; margin:0 0 0 10px;}這種情況之下IE會產生20px的距離 解決方案：在float的標簽樣式控制中加入 _display:inline; 將其轉化為行內屬性。( _ 這個符號只有ie6會識別)
IE6 不支持 PNG 透明背景，對PNG格式的圖片不友好
解決辦法: IE6 下使用 gif 圖片
或采用下述PNG兼容IE6解決方法
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*/ }
IE6默認的行高造成沒有辦法定義1px左右的寬度容器
解決方法：
{
overflow:hidden;
zoom:0.08;
line-height:1px;
}
谷歌
默認會將小於12px的文本設置按照12px顯示
解決方法：統一通過getAttribute()獲取自定義屬性
瀏覽器
瀏覽器默認的margin和padding不同
解決方案：加一個全局的 *{margin:0;padding:0;} 來統一。 超鏈接訪問過後 hover 樣式就不出現了，被點擊訪問過的超鏈接樣式不在具有 hover 和 active 了 解決方法：改變CSS屬性的排列順序 L-V-H-A1 a:link {} 2 a:visited {} 3 a:hover {} 4 a:active {}上下margin重合問題： ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。 解決方法：養成良好的代碼編寫習慣，同時采用margin-top或者同時采用margin-bottom。 IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用 getAttribute() 獲取自定義屬性；Firefox下,只能使用getAttribute()獲取自定義屬性
怪異模式問題
漏寫 DTD 聲明，Firefox 仍然會按照標準模式來解析網頁，但在 IE 中會觸發怪異模式。 為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫 DTD 聲明的好習慣。 現在可以使用[html5](http://www.w3.org/TR/html5/single-page.html) 推薦的寫法：
<!DOCTYPE html>
筆記：html常見的兼容問題