在網(wǎng)站開(kāi)發(fā)中,Div+CSS是必不可少的,然而在開(kāi)發(fā)過(guò)程中,還是會(huì)出現(xiàn)各種的錯(cuò)誤,Div+CSS是網(wǎng)站規(guī)范(或稱“WEB規(guī)范”)中常用的專業(yè)術(shù)語(yǔ)之一,一般以便說(shuō)明與HTML網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言中的表格(table)定位方式的差別,
由于XHTML網(wǎng)站設(shè)計(jì)規(guī)范中,不再使用表格定位技術(shù),反而是選用Div+CSS的方式完成各種定位。運(yùn)用應(yīng)用Div+CSS編碼時(shí)非常容易犯一些錯(cuò)誤。小派列舉了經(jīng)常出現(xiàn)的一些錯(cuò)誤,供大家參考!
1、檢測(cè)HTML元素是不是有拼寫(xiě)錯(cuò)誤、是否忘了結(jié)束標(biāo)識(shí)
就算是老手也常常會(huì)搞錯(cuò)div的嵌套關(guān)系。可以用dreamweaver的檢驗(yàn)功能檢查有沒(méi)有錯(cuò)誤。
2、找尋產(chǎn)生錯(cuò)誤的具體位置
假如錯(cuò)誤干擾了總體布局,則可以逐一刪掉div塊,直至刪掉某個(gè)div塊后顯示完全恢復(fù),就可以確認(rèn)錯(cuò)誤產(chǎn)生的部位。
3、檢測(cè)CSS是否恰當(dāng)
檢測(cè)CSS是否出現(xiàn)拼寫(xiě)錯(cuò)誤、是不是忘了結(jié)尾的}等??梢赃\(yùn)用CleanCSS來(lái)檢測(cè),CSS的拼寫(xiě)錯(cuò)誤。CleanCSS本是為CSS瘦身的專用工具,但還可以檢測(cè)出拼寫(xiě)錯(cuò)誤。
4、運(yùn)用border屬性確認(rèn)出錯(cuò)元素的布局特性
選用float屬性布局無(wú)意間就會(huì)出錯(cuò)。這時(shí)候?yàn)樵丶由蟗order屬性確認(rèn)元素界限,錯(cuò)誤原因即真相大白。
5、盡可能給float元素特定width屬性
許多瀏覽器在顯示未指定width的float元素時(shí)會(huì)有bug。因而無(wú)論float元素的內(nèi)容怎樣,必須要為其特定width屬性。此外特定元素時(shí)盡可能選用em而不是px做單位。
6、留意float元素的父元素不可以指定clear屬性
MacIE下假如對(duì)float的元素的父元素選用clear屬性,周邊的float元素布局就會(huì)錯(cuò)亂。這也是MacIE的有名的bug,假若不清楚就會(huì)迷失方向。
7、float元素不可以指定margin和padding等屬性
IE在顯示指定了margin和padding的float元素時(shí)有bug。因而不可以對(duì)float元素指定margin和padding屬性(可以在float元素內(nèi)部嵌套一個(gè)div來(lái)設(shè)定margin和padding)。還可以選用hack方法為IE特定特別的值。
8、是否重置了默認(rèn)的樣式?
某一些屬性如margin、padding等,不同瀏覽器會(huì)有不一樣的解析。因而最好在開(kāi)發(fā)前先將整體的margin、padding設(shè)定為0、列表樣式設(shè)定為none等。
9、float元素的寬度總和要低于100%
假如float元素的寬度總和恰好是100%,一些原始的瀏覽器將無(wú)法正常顯示。因而請(qǐng)確保寬度總和低于99%。
10、是否忘記了寫(xiě)DTD?
假如不管怎樣調(diào)節(jié)不同瀏覽器顯示結(jié)果依然不同,那么可以檢查一下頁(yè)面打頭是否忘記了寫(xiě)下面這行DTD。(即HTML代碼上邊的聲明)
以上就是經(jīng)常出現(xiàn)的一些錯(cuò)誤,大家在開(kāi)發(fā)網(wǎng)站的過(guò)程中,一定要細(xì)心,不要投機(jī)取巧,嚴(yán)格按照規(guī)范去寫(xiě)代碼,寫(xiě)的多了,自然就熟悉了,不會(huì)在出現(xiàn)這種問(wèn)題,希望這些能幫到大家!
更多網(wǎng)站開(kāi)發(fā)、廣州網(wǎng)站開(kāi)發(fā)、網(wǎng)站開(kāi)發(fā)公司等相關(guān)需求,歡迎您咨詢派點(diǎn)互動(dòng)!