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