關於css樣式排版時的bug處理

對css縮寫的支持問題： 不管是ie 仍是ff對css的縮寫都有一小點問題 好比 border: 0xp solid #fff;兩個瀏覽器支持都沒有問題 但對於四個邊的magin不一樣狀況下，就不能用這種縮寫了，不管是ie仍是ff又會出現邊界解釋錯誤，而致使頁面變形 正確縮寫： border-width:0px 1px 2px 3px; border-style:solid; border-color:#fff; 第二點是 ie對於css的magin padding 等默認值爲0px，但ff卻不同，爲了保持外觀的統一性，即便padding爲0你也要寫上，以避免ff在瀏覽中的錯位。 IE與Firefox的CSS兼容大全 1.DOCTYPE 影響 CSS 處理 2.FF: div 設置 margin-left, margin-right 爲 auto 時已經居中, IE 不行 3.FF: body 設置 text-align 時, div 須要設置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 設置 padding 後, div 會增長 height 和 width, 但 IE 不會, 故須要用 !important 多設一個 height 和 width 5.FF: 支持 !important, IE 則忽略, 可用 !important 爲 FF 特別設置樣式，值得注意的是，必定要將xxxx !important 這句放置在另外一句之上 6.div 的垂直居中問題: vertical-align:middle; 將行距增長到和整個DIV同樣高 line-height:200px; 而後插入文字，就垂直居中了。缺點是要控制內容不要換行 7.cursor: pointer 能夠同時在 IE FF 中顯示遊標手指狀， hand 僅 IE 能夠 8.FF: 連接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是爲了不底邊顯示錯位, 若不設 height, 能夠在 menubar 中插入一個空格。 9.在mozilla firefox和IE中的BOX模型解釋不一致致使相差2px解決方法：div{margin:30px!important;margin:28px;} 注意這兩個margin的順序必定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器能夠識別。因此在IE下其實解釋成這樣：div{maring:30px;margin:28px} 重複定義的話按照最後一個來執行，因此不能夠只寫margin:XXpx!important; 10.IE5 和IE6的BOX解釋不一致 IE5下div{width:300px;margin:0 10px 0 10px;} div的寬度會被解釋爲300px-10px(右填充)-10px(左填充)最終div的寬度爲280px，而在IE6和其餘瀏覽器上寬度則是以 300px+10px(右填充)+10px(左填充)=320px來計算的。這時咱們能夠作以下修改div{width:300px! important;width /**/:340px;margin:0 10px 0 10px} 關於這個/**/是什麼我也不太明白，只知道IE5和firefox都支持但IE6不支持，若是有人理解的話，請告訴我一聲，謝了！：） 11.ul標籤在Mozilla中默認是有padding值的,而在IE中只有margin有值因此先定義ul{margin:0;padding:0;} 就能解決大部分問題 注意事項： 一、float的div必定要閉合。 例如：(其中floatA、floatB的屬性已經設置爲float:left;)<#div id=\"floatA\" > <#div id=\"floatB\" > <#div id=\"NOTfloatC\" > 這裏的NOTfloatC並不但願繼續平移，而是但願往下排。 這段代碼在IE中毫無問題，問題出在FF。緣由是NOTfloatC並不是float標籤，必須將float標籤閉合。 在<#div class=\"floatB\"> <#div class=\"NOTfloatC\"> 之間加上<#div class=\"clear\"> 這個div必定要注意聲明位置，必定要放在最恰當的地方，並且必須與兩個具備float屬性的div同級，之間不能存在嵌套關係，不然會產生異常。 而且將clear這種樣式定義爲爲以下便可：.clear{ clear:both;} 此外，爲了讓高度能自動適應，要在wrapper裏面加上overflow:hidden; 當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;能夠作到，這樣就達到了兼容。 例如某一個wrapper以下定義：.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;} 二、margin加倍的問題。 設置爲float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。 解決方案是在這個div裏面加上display:inline; 例如： <#div id=\"imfloat\"> 相應的css爲 #IamFloat{ float:left; margin:5px;/*IE下理解爲10px*/ display:inline;/*IE下再理解爲5px*/} 三、關於容器的包涵關係 不少時候，尤爲是容器內有平行佈局，例如兩、三個float的div時，寬度很容易出現問題。在IE中，外層的寬度會被內層更寬的div擠破。必定要用Photoshop或者Firework量取像素級的精度。 四、關於高度的問題 若是是動態地添加內容，高度最好不要定義。瀏覽器能夠自動伸縮，然而若是是靜態的內容，高度最好定好。（彷佛有時候不會自動往下撐開，不知道具體怎麼回事） 五、最狠的手段 - !important; 若是實在沒有辦法解決一些細節問題,能夠用這個方法.FF對於"!important"會自動優先解析,然而IE則會忽略.以下.tabd1{ background:url(/res/p_w_picpaths/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/ background:url(/res/p_w_picpaths/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} 值得注意的是，必定要將xxxx !important 這句放置在另外一句之上，上面已經提過