整理我所知道的為相容各個瀏覽器的技巧

來源:互聯網
上載者:User
技巧|瀏覽器

之前的免費空間實在是不行了,3天兩頭給我空的希望,還是決定把陣地轉移,誰讓我沒有錢,誰讓我知識貧乏,我唯有...(此處省略了2萬5千字的豪情壯語).

1,盒解譯器的不同解釋.

#box{   width:600px;        //for  ff+ie6.0   w\idth:500px;       //for   ie6.0-}#box{    width:600px!important            //for ff    width:600px;        //for  ff+ie6.0    width /**/:500px;       //for   ie6.0-}

2,在ie中隱藏css,使用子選取器

html>body #box{     }

3,只有ie識別

*html #box{     }

4,在ie/win有效而ie/max隱藏,使用反斜線

/* \ */
#box{ }

5,給ie單獨定義樣式

6,浮動ie產生的雙倍距離

#box{   float:left;   width:100px;   margin:0 0 0 100px;  //這種情況之下IE會產生200px的距離   display:inline;   //使浮動忽略}

這裡細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制;(塊元素)Inline元素的特點是:和其他元素在同一行上,...不可控制;(內嵌元素)

#box{   display:block; //可以為內嵌元素類比為塊元素   display:inline; //實現同一行排列的的效果   diplay:table;   //for ff,類比table的效果}

7,for oprea only

@media all and (min-width:0px){/* opera */#box{  }}

8,IE與寬度和高度的問題

IE不認得min-這個定義,但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了,如果只用寬度和高度,
正常的瀏覽器裡這兩個值就不會變,如果只用min-width和min-height的話,IE下面根本等於沒有設定寬度和高度。

比如要設定背景圖片,這個寬度是比較重要的。要解決這個問題,可以這樣:

#box{    width: 80px;    height: 35px;}html>body #box{    width: auto;    height: auto;    min-width: 80px;    min-height: 35px;}

9,頁面的最小寬度

min-width是個非常方便的CSS命令,它可以指定元素最小也不能小於某個寬度,這樣就能保證排版一直正確。但IE不認得這個,而它實際上把width當做最小寬度來使。為了讓這一命令在IE上也能用,可以把一個<div> 放到 <body> 標籤下,然後為div指定一個類:

然後CSS這樣設計: 
#container{  min-width: 600px;  width:expression(document.body.clientWidth < 600? "600px": "auto" );}

第一個min-width是正常的;但第2行的width使用了Javascript,這隻有IE才認得,這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。

同樣的辦法也可以為IE實現最大寬度:

#container{min-width: 600px;max-width: 1200px;width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";}

10,清除浮動

.hackbox{       display:table; //將對象作為塊元素級的表格顯示}或者.hackbox{        clear:both;}

或者加入:after(偽對象),設定在對象後發生的內容,通常和content配合使用,IE不支援此偽對象,非Ie 瀏覽器支援,所以並不影響到IE/WIN瀏覽器。-------這種的最麻煩的......

#box:after{    content: ".";     display: block;    height: 0;     clear: both;     visibility: hidden;} 


相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。