常用的相容IE6及小技巧

2021-08-10 07:08:15 字數 1999 閱讀 5267

由於各大主流瀏覽器由不同的廠家開發,所用的核心架構和**也很難重和,這就為各種莫名其妙的bug(**錯誤)提供了溫床。再加上各大廠商出於自身利益考慮而設定的種種技術壁壘,都讓css應用起來比想象得要麻煩。瀏覽器的相容問題是我們必須去克服的。

主流瀏覽器

瀏覽器中文名核心

internet explorer

ie瀏覽器

核心: trident

safari

蘋果瀏覽器

webkit

google chrome

谷歌瀏覽器

blink

mozilla firefox

火狐瀏覽器

gecko

opera

歐朋prsto

如何在ie6及更早的瀏覽器中定義小高度的容器

ie6及更早瀏覽器之所以無法直接定義較小高度的容器是因為缺省會有行高

hack:

#test

如何在ie6及更早的瀏覽器產生雙編劇的bug

當ie6及更早瀏覽器出現浮動後margin值解析為雙倍的情況,設定該元素的display屬性為inline即可

#test

如何在ie6及更早的瀏覽器模擬min-height效果

注意此時#test不能再設定overflow的值為hidden,否則模擬min-height效果將失效

#test

如何解決按鈕在ie7及更早瀏覽器下隨著value增多兩邊留白也隨著增加的問題?

input,button

除了top值,還可以設定為text-top/middle/bottom /text-bottom

如何解決按鈕在ie7及更早瀏覽器下隨著value增多兩邊留白也隨著增加的問題?

input,button

1.如何清除下方出現幾畫素的空白間隙?

方法1:

img

方法2:

img2.如何讓文字垂直對齊文字輸入框?

方法:

input

3.如何讓超連結訪問後和訪問前的顏色不同且訪問後仍保留hover和active效果?

方法:

a:link

a:visited

a:hover

a:active

4.如何使文字溢位邊界顯示為省略號?

方法:

test

5.如何使連續的長字串自動換行?

方法:

test

6.如何讓未知尺寸的在已知寬高的容器內水平垂直居中?

方法:

test

test p

test p img

7.如何去掉超連結的虛線框?

方法:

a8.為什麼2個相鄰div的margin只有1個生效?

.box2

class="box1">box1div>

class="box2">box2div>

本例中box1的底部margin為10px,box2的頂部margin為20px,但表現在頁面上2者之間的間隔為20px,而不是預想中的10+20px=30px,結果是選擇2者之間最大的那個margin,我們把這種機制稱之為「外邊距合併」;外邊距合併不僅僅出現在相鄰的元素間,父子間同樣會出現。

簡單列舉幾點注意事項:

外邊距合併只出現在塊級元素上;

浮動元素不會和相鄰的元素產生外邊距合併;

絕對定位元素不會和相鄰的元素產生外邊距合併;

內聯塊級元素間不會產生外邊距合併;

根元素間不會不會產生外邊距合併(如html與body間);

設定了屬性overflow且值不為visible的塊級元素不會與它的子元素發生外邊距合併;

9.如何在文字框中禁用中文輸入法?

方法:

input,textarea

ime-mode為非標準屬性,寫該文件時只有ie和firefox支援

position fixed 相容ie6問題

最近做專案時用了 來固定div在頁面的最下方,且不隨滾動條滾動而滾動。由於ie6不支援fixed,所以加了 postion absolute bottom expression offsetparent.scrolltop 20 來做相容,此段 在測試頁面ie 6 8都沒問題,但是在專案裡在ie7裡...

IE6相容相容心得 自己總結的

doctype document type 文件型別,說明 xml 或者 x html 的版本。dtd document type definitions 文件型別定義,瀏覽器根據 dtd 來解釋頁面標識,並展現出來。doctype 通常 但不總是 包含指定的dtd檔案的url。瀏覽器一般不讀取這些...

IE6下 position fixed 相容問題

本文所使用的技巧是用了一條internet explorer的css表示式 expression 你不可以直接使用該表示式,因為它可能會因為快取而不更新。解決這一點的最簡單的方式是使用eval包裹你的語句。顯然ie有乙個多步的渲染程序。當你滾動或調整你的瀏覽器大小的時候,它將重置所有內容並重畫頁面,...