web端常見兼容性問題整理

時間 2020-07-27

標籤 web 常見兼容性問題整理欄目 HTML 简体版

原文原文鏈接

1、html和css

各瀏覽器的默認內外邊距不一致問題

最明顯的是ul標籤內外邊距問題,ul標籤在IE-7中，有個默認的外邊距，可是在IE8以上及其餘瀏覽器中有個默認的內邊距。javascript

解決辦法：*{margin:0;padding:0;}css

IE8不兼容總結
點我查看
input 聚焦框顏色與樣式不一樣

解決辦法：使用outline:none，清除默認樣式以後再統一設置html

點擊超連接後，hover、active 樣式沒有效果

解決方案：lvha的順序來寫html5

link:日常的狀態java

visited:被訪問過以後android

hover:鼠標放到連接上的時候web

active:連接被按下的時候瀏覽器

cursor:hand在safari 、 ff下不支持

解決辦法：統一用cursor:pointerapp

塊級元素裏面幾個line-block類型元素並排會產生空白間距

<div class="container"> <img src="1.jpg"/> <img src="2.jpg"/> <img src="3.jpg"/> </div>

解決方案：post

父元素上設置 font-size:0

IE6 png背景圖片不會透明

解決方案：使用png8或參考https://blog.csdn.net/aftermeet/article/details/46734409

IE6 雙倍邊距BUG，在塊級元素浮動後原本外邊距10px,但IE解釋爲20px

解決方案：_display: inline

IE6 3像素bug

浮動塊元素與未浮動塊元素處於同一行，有默認的3px間距

解決辦法：將未浮動元素也變爲浮動

IE6 img圖片下方多出5px

解決方案：讓圖片變成塊級元素

IE6 父元素postion:relative,子元素position:absolute時left和top失效

解決方案：一、給父層設置zoom:1觸發layout。二、給父層設置width

IE6-7 默認的div高度爲一個字體高度,當div定義的高度小於字體高度時，div實際高度爲字體高度

解決方案：

爲這個容器設置下列屬性之一
一、設置overflow:hidden;
二、設置line-height:1px;
三、設置zoom:0.08

IE6-7的寬高計算

寬高與w3c定義的不一致，以寬度爲例，它包含了內容塊寬度+padding寬度+border寬度

IE6-7 line-height 失效的問題

當一個容器裏的文字與img、input、textarea、select、object等元素相連時，對這個容器設置的line-height數值就會失效

解決辦法：在其中一個非文字的對象的樣式中增長：
margin: (容器的line-height - 對象自己的高度)/2px 0;
vertical-align:middle;

IE6不支持min-width/min-height

解決方案：

min-height:200px; height:auto !important; height:200px;

IE6 不支持!important、不支持子選擇器
IE6-7不支持display:table-cell

該屬性通常用在垂直居中，可使用其它解決方案

IE6不支持position:fixed

只使用使用position:absolute來模擬的話會出現滾動閃爍，需進一步處理，完整方案

IE6和IE7的父元素爲overflow,子元素若是爲relative，則父元素的overflow沒辦法約束子元素的高度

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="height:100px; width:100px; background:#CCC; overflow:hidden;"> 
<div style="height:300px; width:90px; background:#999; position:relative;"></div> 
</body>
</html>

解決方案：將父標籤的position也設置成relative

IE6-9 和 Firefox 3 中a內部img元素默認的邊框

img{ border:none;}

IE9如下瀏覽器不能識別css opacity屬性

解決方案:使用ie的css透明度屬性

filter: alpha(opacity = 50); filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

ie9 如下瀏覽器對 html5 新增標籤不識別的問題

解決方案：使用html5shiv.js

ie9 如下瀏覽器不支持 CSS3 Media Query

解決方案：使用respond.js

IOS橫豎屏切換時字體自動縮放

例如豎屏狀態下是14px，轉換爲橫屏時就變成了20px

解決方案：-webkit-text-size-adjust: 100%

IOS overflow: scroll滑動卡頓的問題

解決方案：-webkit-overflow-scrolling:touch

IOS輸入框默認有內陰影

解決方案：input{ -webkit-appearance:none;}

觸摸元素時產生半透明背景（IOS Android）

element{ -webkit-tap-highlight-color:rgba(255,255,255,0);}

僞類：active失效（IOS Android）

解決方案：<body ontouchstart=''>

移動端1px邊框問題

在移動端中，若是給元素設置一個像素的邊框的話，那麼在手機上看起來是會比一個像素粗。

解決方法：爲相應的元素指定一個絕對定位的僞元素，該僞元素寬高爲容器元素的1倍，寬高包含邊框（縮放後纔會跟容器元素同樣大，邊框也會同步縮放），同時需指定縮放的座標爲left top

.box{

height: 200px;

width: 500px;

background-color: green;

position: relative;

}

@media screen and (-webkit-min-device-pixel-ratio: 2){

.box:after{

content: '';

position: absolute;

top: 0;

left: 0;

border: 1px solid #000;

box-sizing: border-box;

width: 200%;

height: 200%;

transform: scale(0.5);

transform-origin: left top;

}

android 4.x 設置了border-radius和背景色時，背景色溢出到圓角以外

解決方案： background-clip:padding-box;

首次渲染CSS3動畫時閃爍BUG

部分webkit內核手機瀏覽器在使用transform:translate或transition屬性時，會出現閃爍現象
解決方案：

.css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

　　IOS input+fixed定位+軟鍵盤問題

IOS8如下input元素使用了fixed定位，獲取焦點彈出軟鍵盤後，再滾動頁面則該元素會隨頁面滾動

解決思路：把頁面上須要滾動的區域移到一個容器中，而後對容器使用overflow-y:scroll來滾動

 <!-- 能夠滾動的區域 -->
 <main>
 <div class="content">
 <!-- 內容在這裏... -->
 </div>
 </main>

.main {
 /* main絕對定位，進行內部滾動 */
 position: absolute;
 top: 50px;
 bottom: 34px;
 /* 使之能夠滾動 */
 overflow-y: scroll;
}

main .content {
 height: 2000px;
}

移動端兼容性參考
另外一篇兼容性參考