瀏覽器兼容問題及解決方案

時間 2019-11-12

原文原文鏈接

　　所謂的瀏覽器兼容性問題，是指由於不一樣的瀏覽器對同一段代碼有不一樣的解析，形成頁面顯示效果不統一的狀況。在大多數狀況下，咱們的需求是，不管用戶用什麼瀏覽器來查看咱們的網站或者登錄咱們的系統，都應該是統一的顯示效果。因此瀏覽器的兼容性問題是前端開發人員常常會碰到和必需要解決的問題。css

　　瀏覽器最關鍵的部分就是它的渲染引擎（Rendering Engine），也就是你們日常所說的的「內核」。市場上瀏覽器種類不少，不一樣瀏覽器的內核也不盡相同，因此各個瀏覽器對網頁的解析存在必定的差別。常見的瀏覽器內核表明有五種，分別是Trident、Gecko、Blink、Webkit、Presto 。他們表明的瀏覽器是：html

Trident:IE、Maxthon(遨遊)、騰訊、Theworld世界之窗、360瀏覽器；前端

Gecko：表明做品Mozilla Firefox 是開源的,它的最大優點是跨平臺，能在Microsoft Windows、Linux和MacOS X等主要操做系統上運行；瀏覽器

Webkit :表明做品Safari、Chrome ，是一個開源項目；安全

Presto :表明做品Opera ，Presto是由Opera Software開發的瀏覽器排版引擎。它也是世界上公認的渲染速度最快的引擎；app

Blink ：由Google和Opera Software開發的瀏覽器排版引擎，2013年4月發佈。ide

　　下面介紹一些常見的瀏覽器兼容問題及解決方案。佈局

一、不一樣瀏覽器的標籤默認的外補丁和內補丁不一樣網站

解決方案： css 裏增長通配符 * { margin: 0; padding: 0; }。操作系統

二、IE6雙邊距問題；在 IE6中設置了float , 同時又設置margin , 就會出現邊距問題

解決方案：設置display:inline;

三、當標籤的高度設置小於10px，在IE六、IE7中會超出本身設置的高度

解決方案：超出高度的標籤設置overflow:hidden,或者設置line-height的值小於你的設置高度

四、圖片默認有間距

解決方案：使用float 爲img 佈局。

五、IE9一下瀏覽器不能使用opacity

解決方案：opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

六、邊距重疊問題；當相鄰兩個元素都設置了margin 邊距時，margin 將取最大值，捨棄最小值；

解決方案：爲了避免讓邊重疊，能夠給子元素增長一個父級元素，並設置父級元素爲overflow:hidden；

七、cursor:hand 顯示手型在safari 上不支持

解決方案：統一使用 cursor:pointer。

八、兩個塊級元素，父元素設置了overflow:auto；子元素設置了position:relative ;且高度大於父元素，在IE六、IE7會被隱藏而不是溢出；

解決方案：父級元素設置position:relative。

還有一種解決方法就是CSS HACK的方法。

首先須要知道的是：

全部瀏覽器通用 height: 100px;
IE6 專用 _height: 100px;
IE7 專用 *+height: 100px;
IE六、IE7 共用 *height: 100px;
IE七、FF 共用 height: 100px !important;

使用IE專用的條件註釋

<link rel="stylesheet" type="text/css" href="css.css" />

<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

如下兩種方法幾乎能解決現今全部兼容.

1, !important (不是很推薦，用下面的一種感受最安全)

隨着IE7對!important的支持, !important 方法如今只針對IE6的兼容.(注意寫法.記得該聲明位置須要提早.)

代碼:
<style>
#wrapper {
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>

2, IE6/IE77對FireFox <from 針對firefoxie6 ie7的css樣式>

*+html 與 *html 是IE特有的標籤, firefox 暫不支持.而*+html又爲 IE7特有標籤.

代碼:
<style>
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */
</style>

注意:
*+html 對IE7的兼容必須保證HTML頂部有以下聲明：<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

萬能 float 閉合(很是重要!) 能夠用這個解決多個div對齊時的間距不對，

關於 clear float 的原理可參見 [How ToClear Floats Without Structural Markup]
將如下代碼加入Global CSS 中,給須要閉合的div加上 class=」clearfix」便可,屢試不爽.

代碼:
<style>
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

上面就是一些瀏覽器問題及其解決方法，但願能夠幫到你！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。