Firefox與IE的CSS兼容CSS HACK技巧

時間 2019-11-12

原文原文鏈接

　　1. Div居中問題php

　　div設置 margin-left, margin-right 爲 auto 時已經居中，IE 不行，IE須要設定body居中，首先在父級元素定義text-algin: center;這個的意思就是在父級元素內的內容居中。css

　　2.CSS 連接(a標籤)的邊框與背景html

　　a連接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是爲了不底邊顯示錯位, 若不設 height, 能夠在 menubar 中插入一個空格。java

　　3.超連接訪問事後hover樣式就不出現的問題web

　　被點擊訪問過的超連接樣式不在具備hover和active了,不少人應該都遇到過這個問題,解決技巧是改變CSS屬性的排列順序: L-V-H-A瀏覽器

　　Code:佈局

<style type="text/css">
　　
　　</style>網站

　　4. 遊標手指cursorui

　　cursor: pointer 能夠同時在 IE FF 中顯示遊標手指狀， hand 僅 IE 能夠this

　　5.UL的padding與margin

　　ul標籤在FF中默認是有padding值的,而在IE中只有margin默認有值,因此先定義 ul{margin:0;padding:0;}就能解決大部分問題

　　6. FORM標籤

　　這個標籤在IE中,將會自動margin一些邊距,而在FF中margin則是0,所以,若是想顯示一致,因此最好在css中指定margin和 padding,針對上面兩個問題,個人css中通常首先都使用這樣的樣式ul,form{margin:0;padding:0;}給定義死了,因此後面就不會爲這個頭疼了.

　　7. BOX模型解釋不一致問題

　　在FF和IE中的BOX模型解釋不一致致使相差2px解決技巧：div{margin:30px!important;margin:28px;} 注意這兩個margin的順序必定不能寫反， important這個屬性IE不能識別，但別的瀏覽器能夠識別。因此在IE下其實解釋成這樣：

　　div{maring:30px;margin:28px}重複定義的話按照最後一個來執行，因此不能夠只寫margin:xx px!important;#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
　　#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width :500px; //for ie6.0-}

　　8.屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)

　　p[id]{}div[id]{}

　　這個對於IE6.0和IE6.0如下的版本都隱藏,FF和OPera做用.屬性選擇器和子選擇器仍是有區別的,子選擇器的範圍從形式來講縮小了,屬性選擇器的範圍比較大,如p[id]中,全部p標籤中有id的都是一樣式的.

　　9.最狠的手段 - !important

　　若是實在沒有辦法解決一些細節問題,能夠用這個技巧.FF對於」!important」會自動優先解析,然而IE則會忽略.以下

　　.tabd1{
　　background:url(http://www.php100.com/res/images/up/tab1.gif) no-repeat 0px 0px !important;
　　background:url(http://www.php100.com /res/images/up/tab1.gif) no-repeat 1px 0px; }

　　值得注意的是，必定要將xxxx !important 這句放置在另外一句之上。

　　10.IE,FF的默認值問題

　　或許你一直在抱怨爲何要專門爲IE和FF寫不一樣的CSS，爲何IE這樣讓人頭疼，而後一邊寫css，一邊咒罵那個可惡的M$ IE.其實對於css的標準支持方面，IE並無咱們想象的那麼可惡，關鍵在於IE和FF的默認值不同而已，掌握了這個技巧，你會發現寫出兼容FF和 IE的css並非那麼困難，或許對於簡單的css，你徹底能夠不用」!important」這個東西了。

　　咱們都知道，瀏覽器在顯示網頁的時候，都會根據網頁的css樣式表來決定如何顯示，可是咱們在樣式表中未必會將全部的元素都進行了具體的描述，固然也沒有必要那麼作，因此對於那些沒有描述的屬性，瀏覽器將採用內置默認的方式來進行顯示，譬如文字，若是你沒有在css中指定顏色，那麼瀏覽器將採用黑色或者系統顏色來顯示，div或者其餘元素的背景，若是在css中沒有被指定，瀏覽器則將其設置爲白色或者透明，等等其餘未定義的樣式均如此。因此有不少東西出現 FF和IE顯示不同的根本緣由在於它們的默認顯示不同，而這個默認樣式該如何顯示我知道在w3中有沒有對應的標準來進行規定，所以對於這點也就別去怪罪IE了。

　　11.爲何FF下文本沒法撐開容器的高度

　　標準瀏覽器中固定高度值的容器是不會象IE6裏那樣被撐開的,那我又想固定高度,又想能被撐開須要怎樣設置呢？辦法就是去掉height設置min- height:200px; 這裏爲了照顧不認識min-height的IE6 能夠這樣定義:

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

12.FireFox下如何使連續長字段自動換行

　　衆所周知IE中直接使用 word-wrap:break-word 就能夠了, FF中咱們使用JS插入
　　的技巧來解決

　　<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaa＜/div>

　　<scrīpt type="text/javascrīpt">
　　
　　function toBreakWord(el, intLen){
　　var ōbj=document.getElementByIdx_x_xx_x_x(el);
　　var strContent=obj.innerHTML;
　　var strTemp="";
　　while(strContent.length>intLen){
　　strTemp+=strContent.substr(0,intLen)+"
　　";
　　strContent=strContent.substr(intLen,strContent.length);
　　}
　　strTemp+="
　　"+strContent;
　　obj.innerHTML=strTemp;
　　}
　　if(document.getElementByIdx_x_xx_x_x && !document.all) toBreakWord("ff", 37);
　　
　　</scrīpt>

　　13.爲何IE6下容器的寬度和FF解釋不一樣？

　　問題的差異在於容器的總體寬度有沒有將邊框（border）的寬度算在其內,這裏IE6解釋爲200PX ,而FF則解釋爲220PX,那到底是怎麼致使的問題呢？你們把容器頂部的xml去掉就會發現原來問題出在這,頂部的申明觸發了IE的qurks mode。

<?xml version="1.0" encoding="gb2312"?>
　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
　　<style type="text/css">
　　
　　</style>
　　<div ōnclick="alert(this.offsetWidth)">讓FireFox與IE兼容＜/div>

　　IE7.0對CSS的支持又有新問題，解決以下。

　　第一種，CSS HACK

　　Bpx;
　　_height:20px;

　　注意順序。

　　下面這樣也屬於div CSS HACK，不過沒有上面這樣簡潔。

　　#example { color: #333; }
　　* html #example { color: #666; }
　　*+html #example { color: #999; }

　　第二種，是使用IE專用的條件CSS註釋

<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]-->

　　第三種，css filter的辦法，如下是從國外網站翻譯過來的。

　　新建一個css樣式以下：

　　#item {
　　width: 200px;
　　height: 200px;
　　background: red;
　　}

　　新建一個div,並使用前面定義的css的樣式：

　　在body表現這裏加入lang屬性,中文爲zh：

　　如今對div元素再定義一個樣式：

　　*:lang(en) #item{
　　background:green !important;
　　}

css兼容問題

兼容問題

1.文字自己的大小不兼容。一樣是font-size:14px的宋體文字，在不一樣瀏覽器下佔的空間是不同的，ie下實際佔高16px，下留白3px，ff下實際佔高17px，上留白1px，下留白3px。解決方案：給文字設定 line-height 。確保全部文字都有默認的 line-height 值。

2.ff下容器高度限定.即容器定義了height以後，容器邊框的外形就肯定了，不會被內容撐大，而ie下是會被內容撐大，高度限定失效。因此不要輕易給容器定義height。

3. 橫向上的內容撐破容器問題。若是float 容器未定義寬度，ff下內容會盡量撐開容器寬度，ie下則會優先考慮內容折行。故，內容可能撐破的浮動容器須要定義width。

4.浮動的清除，ff下必須清除浮動clear:both。

5. double-margin bug。ie6下給浮動容器定義margin-left 或者margin-right 實際效果是數值的2倍。解決方案，給浮動容器定義display:inline。

6.margin bug.當外層元素內有float元素時，外層元素如定義margin-top:14px，將自動生成margin-bottom:14px。padding也會出現相似問題，都是ie6下的特產，該類bug 出現的狀況較爲複雜，遠不僅這一種出現條件。解決方案：外層元素設定border 或設定float。

7.吞吃現象.仍是ie6，上下兩個div，上面的div設置背景，卻發現下面沒有設置背景的div 也有了背景，這就是吞吃現象。對應上面的背景吞吃現象，還有滾動下邊框缺失的現象。解決方案：使用zoom:1。

8.註釋也能產生bug~~~「多出來的一隻豬。」這是前人總結這個bug使用的文案，ie6的這個bug 下，你們會在頁面看到豬字出現兩遍，重複的內容量因註釋的多少而變。解決方案：用「<!–[if !IE]> picRotate start <![endif]–>」方法寫註釋。

9.img下的留白，你們看這段代碼有啥問題：

把div的border打開，你發現圖片底部不是緊貼着容器底部的，是img後面的空白字符形成，給img設定 display:block能夠解決。

10去line-height。<div style=」line-height:20px」><img />文字</div>，很遺憾，在ie6下單行文字 line-height 效果消失了。。。，緣由是<img />這個inline-block元素和inline元素寫在一塊兒了。解決方案：讓img 和文字都 float起來。

11接的hover狀態。a:hover img{width:300px} 咱們想讓鼠標hover時，連接裏包含的圖片寬度變化，惋惜在ie6下無效，ie7、ff下有效。

12連接的hover狀態。div:hover{} 這樣的樣式ie6是不認的，在ie7、ff下才有效果。

13block化的a連接，其內套absolute層，absolute層內放置img，ie下，鼠標點擊img不會有連接效果，ff下正常。

14沒法完全清除的float。解決方案：給ul 屬性zoom:1 （給li 加zoom:1 沒用）

15ie下overflow:hidden對其下的絕對層position:absolute或者相對層position:relative無效。解決方案：給overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。