1. 程式人生 > >ie瀏覽器相容問題彙總

ie瀏覽器相容問題彙總

1,若直接給一個元素設定absolute定位。在瀏覽器縮放的時候。位置會錯位。解決的方法是給外層的元素設定為relative定位。

2,低版本ie瀏覽器不支援placeholder屬性

3,盒模型上規定了垂直邊界重疊,若父元素有一個向上的margin值(10px),其子元素有一個向上的margin值(20px)。重疊部分取大者。因此父元素和上一個div之間出現的是20px的空隙。

4,使用display:inline-block會導致元素之間有空隙,解決方法:父元素設定font-size:0或採用浮動的方法;

5,Ie 8及以下不支援透明度的寫法,低版本的ie瀏覽器的透明度寫法filter:alpha(opacity:).

6,在谷歌瀏覽器中,一個li標籤中存在一個a標籤和一個span,li標籤浮動,a標籤旁邊會多出來幾px。解決方法是a標籤進行浮動

7,要讓背景圖片使用ie-css.htc的border-radius屬性。有bug。很難使用。最好把背景換成img來使用。

8,關於ie-css.htc的使用方法。Z-index要比周圍元素大;要有定位屬性;behavior中的路徑最好寫成絕對路徑

9,ie瀏覽器低版本的一個bug,透明元素不響應hover事件!

10,在做區別ie8,ie9的hack的是時候。使用/9,/9/0來實現。發現若是做顏色的hack。可達到目的。若做margin-top的hack。發現在ie8,9下實現的效果是一樣的。故猜測此hack只支援部分屬性

11,在ie8裡background: url(../images/goods.png)no-repeat!important; 背景圖片不顯示

background: url(../images/goods.png) no-repeat!important; 背景圖片顯示。 差距僅僅是多了個空格。

12,jquery中的trigger無法觸發hover

13,在低版本ie瀏覽器下實現使用PIE.htc方法並要使背景透明的方法

background: url(../imgs/news-circle.png) no-repeat rgba(0,0,0,0.5);

-pie-background: url(assets/common/imgs/news-circle.png) no-repeat rgba(0,0,0,0.5); /*路徑相對於html頁面而言*/

-ms-border-radius: 350px 350px 0px 0px;

border-radius: 350px 350px 0px 0px;

behavior: url(PIE/PIE.htc);/*路徑相對於html頁面而言*/

14,在ie 6下使用button標籤或input type=“button”或input type=“submit”時。並給它們加上border屬性的時候。會發現外層繞著一層白色縫隙。解決的辦法可以給它本身的css屬性border:none 0;並給它加一個巢狀層。給巢狀層加一個border屬性。

15,在ie7下發現padding-bottom屬性失效。解決的方法是加上屬性overflow:hidden;

16,在ie6下發現padding-bottom屬性失效。解決的方法是讓被他巢狀的最後一個元素設定margin-bottom值。

17,在ie 6下元素有預設的行高。解決方法是overflow:hidden;或font-size:0;或line-height:xx px;

18,ie 6下快元素進行浮動。並且有橫向的margin,實際的margin會比設定的margin多一倍。解決的方法是display:inline;

19,在各個瀏覽器下img有空隙(回車的原因)。解決的方法是讓圖片浮動或給圖片的包含層加font-size:0。

20,兩個塊元素,豎向的margin值不增加,會重疊,其間距為最大的margin值。

21,ie6對!important屬性不支援

22,z-index不起作用的bug:

1)ie6下 首先講講第一種z-index無論設定多高都不起作用情況。這種情況發生的條件有三個:1、父標籤position屬性為relative;2、問題標籤含有浮動(float)屬性。

2)所有瀏覽器:它只認第一個爸爸

層級的高低不僅要看自己,還要看自己的老爸這個後臺是否夠硬。用術語具體描述為:

父標籤position屬性為relative或absolute時,子標籤的absolute屬性是相對於父標籤而言的。而在IE6下,層級的表現有時候不是看子標籤的z-index多高,而要看它們的父標籤的z-index誰高誰低。

23,css hack:

_height:100px; /*ie 6專用*/

*+height:100px; /*ie 7專用*/

*height:100px ; /*ie6,ie7共用*/

height:100px\0; /*ie8,ie9,ie10共用*/

height:100px\9; /*ie6,ie7,ie8,ie9,ie10共用*/

height:100px\9\0; /*ie9,ie10共用*/

相關推薦

ie瀏覽器相容問題彙總

1,若直接給一個元素設定absolute定位。在瀏覽器縮放的時候。位置會錯位。解決的方法是給外層的元素設定為relative定位。 2,低版本ie瀏覽器不支援placeholder屬性 3,盒模型上規定了垂直邊界重疊,若父元素有一個向上的margin值(10px),其子元素有一個向上的margin值(20p

div css Firefox和IE瀏覽器相容問題 用CSS實現cellSpacing屬性效果

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

css:IE瀏覽器相容常見的bug

IE瀏覽器相容常見的幾種bug: 1.沒有使用正確的doctype,應該正確宣告doctype。 2.各瀏覽器對不同標籤的初始值不同,需要進行css初始化。 下面有幾種css初始化示例程式碼: 雅虎工程師提供的CSS初始化示例程式碼 body,div,dl,dt,dd

IE瀏覽器相容☞css hack

       ie瀏覽器的相容問題,各位前端的小夥伴肯定有不少,頭疼的記憶;目前w3c標準,對html5,css3都已經標準化,各大瀏覽器廠商也都對瀏覽器進行了升級改造;但是在某些行業,如國企,銀行,等一些傳統企業,依然再用IE8甚至更老的版本瀏覽器,而且

IE瀏覽器相容問題

1.flex-direction: column;不豎向排列 解決方案:在IE中,flex-direction: column和align-item不能同時使用,需要把align-item刪掉 2.位置偏移 解決方案:在高版本瀏覽器中使用了position:absolu

解決舊版 IE 瀏覽器相容問題

IE下大部分相容性都是因為haslayout屬性的觸發問題,儘量觸發haslayout屬性,可以減少很多IE下得相容性問題,例如: 在IE6下,子級的寬度會撐開父級設定好的寬度. 準確設定好寬度. IE6中,元素浮動,如果寬度需要有內容撐開 需要給裡面

Edge,IE瀏覽器 相容模式設定

1.前兩天幫別人查教師資格證分數,發現只能用核心為IE的瀏覽器且是相容模式才可以進入該網站,下面是用谷歌瀏覽器訪問該網站給的提示: 2.我的電腦是win10系統,然後去用Edge瀏覽器去訪問該網站,依舊是上面的提示,說明瀏覽器不是相容模式,進入Edge瀏覽器設定中,如下圖操作:

如何快速處理IE瀏覽器相容

如何快速處理IE瀏覽器相容         一、基本樣式相容處理      最近專案需要突然要求相容到ie6,已經做好的東西處理起來讓人有點崩潰,敲起來簡直可怕。

a標籤IE瀏覽器相容問題

a標籤中如果有button, 那麼在IE下就不能跳轉到herf的連結。而火狐和google中可以 如下:此種在IE中不可以。這邊的class中的屬性只用於按鈕樣式。 <a href="jsp/manage/manage-context.jsp"><inp

記一個IE瀏覽器相容模式與IE文件模式不一致的問題

今天遇到一個IE相容的奇葩問題,瀏覽器相容模式為9,但是文件模式為7。  仔細看了一下設定相容的程式碼: <meta http-equiv="X-UA-Compatible" content="IE=edge" />  這個東西本身是對的,沒有問題。  那麼猜想

IE瀏覽器相容9/10/11版本(針對老專案而言)

對於老專案只支援IE7/8/9搞後臺的朋友,不用太擔心相容是前端人員搞得事兒了,我們也可以.之前也是花了近兩週的時間在網上找了各種資料,什麼最簡單的相容方法啊還是一行程式碼教你解決此類問題等等...多數還是以參考為主,目前我們相對來說比較老的一個專案,以前只支援IE9,現在想

[ IE瀏覽器相容問題 ] Web Uploader 在IE、FireFox下點選上傳沒反應

一、專案原始碼: > html > js 初始化外掛: 事件繫結:avalon > web > 報錯: - IE: 指令碼缺少物件 - FireFox

IE瀏覽器相容問題之initial關鍵字

    在專案開發中遇到了IE瀏覽器的相容問題。前端使用VUE框架+Element UI元件,在寫一個dialog時,使用el-switch,在chrome下除錯時,沒有發現問題,元件居左,如下圖     在IE瀏覽器下開啟,發現元件居中了,如下,     按F12檢視元素,

Webuploader IE瀏覽器相容問題(點選無反應)解決

最近專案中需要做檔案上傳,用到了Webuploader ,經過全面除錯在chrome ,火狐等瀏覽器除錯都沒問題,但是測試人員反應在IE瀏覽器點選沒反應,選擇檔案視窗未彈出。 開發過程並未使用IE瀏覽器除錯過,所以忽略了這一問題。首先想到的就是外掛對ie 瀏覽器的相容問題。

瀏覽器相容問題及解決方法彙總(持續更新......)

一、出現相容問題的原因:         瀏覽器種類很多,但是區別主要在瀏覽器核心的不同,所以各核心對網頁的解析差異,是導致瀏覽器相容問題出現的主要原因。關於瀏覽器核心(browser kernel),是瀏覽器最為核心

解決IE、華為瀏覽器相容不了es6語法的解決辦法

1.  main.js  直接引入 import 'babel-polyfill'   2.在 webpack 下 build資料夾  webpack.base.conf.js 下 entry 匯入模組   context: path

IE相容問題 動態生成的節點IE瀏覽器無法觸發

ie下click()不能操作文件中沒有的節點,所以你可以在click()前新增下面的語句 document.body.appendChild( input ); input.style.display = 'none'; input.click(); 要想相容ie9之前用attachEven

【解決Chrome瀏覽器IE瀏覽器上傳附件相容的問題 -- Chrome關閉flash後,uploadify外掛不可用的解決辦法】

專案中遇到過這種情況: 利用uploadify外掛在IE和chrome瀏覽器中上傳附件正常, 突然有一天chrome禁用了flash外掛,uploadify外掛在chrome中就不能正常使用了,IE上正常。   =========================================

vue+iview 相容IE瀏覽器

最近在搞一個基於vue的後臺管理系統相容IE瀏覽器,眼淚都要掉下來。後來和產品說了,同意相容IE11,感動得我眼淚啊 這裡也就是記錄一下我遇到的超級煩的bug  首先是'babel-polyfill' 和 "autoprefixer-loader" 這個不用多說,資源一大

js複製、貼上到瀏覽器(原生、IE相容

一、最近有需求需要複製圖片(Ctrl+C)到瀏覽器進行貼上(Ctrl+V)然後進行貼上的內容上傳到伺服器,因以前上傳檔案都是通過外掛來進行實現,所以並沒有做過多的學習,以下程式碼是基於其他網友文章中提供的內容,主要程式碼也已經做了部分的註釋,如果不滿足需求,大可