網(wǎng)頁制作中的兼容性與性能優(yōu)化是核心挑戰(zhàn),直接影響用戶體驗(yàn)和業(yè)務(wù)成效。一般技能人員在寫網(wǎng)頁的時分會遇到許多瀏覽器的兼容性問題及其他各種網(wǎng)頁加載速度問題等,這也是讓技能人員頭疼的問題,一般會有以下的情況:
一、margin加倍問題,假如給一個塊級元素同時加了float:left和margin-left,會發(fā)生margin加倍問題,解決方法是給其加display:inline;
二、IE6中會發(fā)生3px問題:兩個起浮的塊級元素,左面的加了float,右邊的沒有加,那么在IE6中就會發(fā)生3px問題,解決方法就是給右邊的也加上起;
三、父級無法自動擴(kuò)高,內(nèi)層容器有起浮。Overflow:hidden;zoom:1(兼容ie6);給父級加float
四、Ie6無法界說小于18px高度的容器,在IE6中不能界說小于18像素高度的容器,解決方法是給其加overflow:hidden;
五、讓容器水平排列:都設(shè)float,父級寬度是否滿足,嵌套
六、滑動門:給a加display:block而且加高,給a加float。
七、Label不寫for,ie6無法聚焦
八、對整個塊做超鏈接,只給a加display:block在ie6中無法完成,必須加寬高,或許不加寬高加padding
九、圖片或embed出現(xiàn)空地,給其加display:block或float:left。
十、濾鏡的一些東西不要去用:IE的一些濾鏡在FIREFOX中不支持,往往寫一些作用時你仍是運(yùn)用CSSHACK;而濾鏡是一個十分毫資源的東西;特別是一些羽化、陰影和一個前通明的作用;
十一、一個頁面上少用絕對定位:絕對定位(position:absolute)是網(wǎng)頁布局中很常用到的,特別是作一些起浮作用時,也會讓頁面看起來十分的酷。但網(wǎng)頁中假如運(yùn)用過多的絕對定位,會讓你的網(wǎng)頁變得十分的慢,這一點(diǎn)上邊FIREFOX體現(xiàn)要比IE還要差。解決方法是:盡可能少用,這個少用的值是多少,也沒有一個十分好的值來說明;還要看絕定定位這個標(biāo)簽里邊的內(nèi)容的多少;在這兒我只能說,這樣寫會有功能問題,少用或許假如能用變通完成相同的作用,就用變通的辦法。
十二、background背景圖片的平鋪:有些網(wǎng)頁的背景或頁面中某塊的背景一般要用到圖片的平鋪,平鋪后就會有平鋪次數(shù)的問題,假如是單次還好,假如是多次,就廢了。主張的操作方法是:色彩少的圖片要做成gif圖片或許平鋪的圖片盡可能大一些,假如是色彩少的GIF圖片,圖片大一些,實(shí)際大小也不會大多少;背景圖片請盡可能運(yùn)用sprite技能,減小http請求,考慮到多人協(xié)作開發(fā),sprite按模塊制造;
十三、讓特點(diǎn)盡可能多的去繼承:盡可能讓一些特點(diǎn)子可以繼承父,而不是掩蓋父
十四、CSS的途徑別太深;
十五、能簡寫的一些就簡寫:例如#zishu{pading-top:10px;padding-right:50px;padding-left:50px;padding-bottom:4px;}改成:#zishu{padding:10px50px4px50px}
十六、別放空的的class或沒有的class在HTML代碼中。
十七、float的應(yīng)用:這個東西我的感覺是假如運(yùn)用不當(dāng),百分百有功能問題,而且還十分的大,但真實(shí)不知道怎樣樣能弄一個例子出來;這兒只能主張大家假如不是很理解float是怎樣工作的,仍是少運(yùn)用為妙。通過工具化和自動化,將這些最佳實(shí)踐融入開發(fā)流程,能大幅提升效率與質(zhì)量。 |