【20年品牌建站】找北京網站建設公司就選新鴻儒/提供北京網站建設報價/北京網站制作/北京網站設計/網站開發、北京網站建設公司電話【010-51267718】有優惠哦!
簡體
繁體 簡體
我們的服務遍布中國

我們的服務遍布中國
乃至世界

新鴻儒所服務的品牌地域與城市
北京 天津 上海 廣州 深圳 香港 廈門 江蘇 浙江 山東
重慶 長沙 武漢 成都 西安 寧夏 麗江 青海 云南 烏魯木齊
黑龍江 內蒙古 河北 ...
新鴻儒服務與合作的全球各地
美國 加拿大 德國 法國 英國 瑞士 意大利 荷蘭
印度 日本 韓國 ...

不論你的品牌在何處
我們都可以提供完善的服務與幫助

致電

010-5126 7718

div+css常見錯誤

發布時間:2013-12-18 瀏覽:208打印字號:


常見錯誤:
1. 檢查HTML元素是否有拼寫錯誤、是否忘記結束標記
即使是老手也經常會弄錯div的嵌套關系??梢杂胐reamweaver的驗證功能檢查一下有無錯誤。
2. 檢查CSS是否正確
檢查一下有無拼寫錯誤、是否忘記結尾的 } 等??梢岳肅leanCSS來檢查 CSS的拼寫錯誤。CleanCSS本是為CSS減肥的工具,但也能檢查出拼寫錯誤。
3. 確定錯誤發生的位置
如果錯誤影響了整體布局,則可以逐個刪除div塊,直到刪除某個div塊后顯示恢復正常,即可確定錯誤發生的位置。
4. 利用border屬性確定出錯元素的布局特性
使用float屬性布局一不小心就會出錯。這時為元素添加border屬性確定元素邊界,錯誤原因即水落石出。
5. float元素的父元素不能指定clear屬性
MacIE下如果對float的元素的父元素使用clear屬性,葉赫那拉烏發散價格周圍的float元素布局就會混亂。這是MacIE的著名的bug,倘若不知道就會走彎路。
6. float元素務必指定width屬性
很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何,一定要為其指定width屬性。
另外指定元素時盡量使用em而不是px做單位。
7. float元素不能指定margin和padding等屬性
IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性(可以在float元素內部嵌套一個div來設置margin和padding)。也可以使用hack方法為IE指定特別的值。
8. float元素的寬度之和要小于100%
如果float元素的寬度之和正好是100%,某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小于99%。
9. 是否重設了默認的樣式?
某些屬性如margin、padding等,不同瀏覽器會有不同的解釋。因此最好在開發前首先將全體的margin、padding設置為0、列表樣式設置為none等。
10. 是否忘記了寫DTD?
如果無論怎樣調整不同瀏覽器顯示結果還是不一樣,那么可以檢查一下頁面開頭是不是忘了寫下面這行DTD:
常用工具:
1.Notepad.exe記事本,(程序小,隨時手工編輯,垃圾代碼少,不能可視化預覽)
2.Dreamweaver(老牌網頁編輯工具,功能全,程序比較大,但對P+CSS可視化支持程度不太友好)
3..editplus(應該是升級版的記事本工具,代碼編輯有顏色提示)
4.Ultraedit
5.Golive(將來替代Dreamweaver的產品)
6.Topstyle(功能相當多,附有CSS碼檢查功能,減少寫錯的機會。尤其是它的HELP文件中詳細的CSS指令介紹,很適于用作參考文件與初次接觸CSS的人做為學習使用)
兼容辦法:
區別IE6與FF: backgroundrange;*background:blue;
區別IE6與IE7: background:green !important;background:blue;
區別IE7與FF: backgroundrange; *background:green;
區別FF,IE7,IE6: backgroundrange;*background:green !important;*background:blue;
IE7,IE8兼容:
HEAD
1. CSS中幾種瀏覽器對不同關鍵字的支持,可進行瀏覽器兼容性重復定義 !important 可被FireFox和IE7識別 * 可被IE6、IE7識別 _ 可被IE6識別 *+ 可被IE7識別
2. IE專用的條件注釋
3. 幾個瀏覽器對實際像素的解釋 IE/Opera:對象的實際寬度 = (margin-left) + width + (margin-right) Firefox/Mozilla:對象的實際寬度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)
4. 鼠標手勢問題:FireFox的cursor屬性不支持hand,但是支持pointer,IE兩個都支持;所以為了兼容都用pointer
5. FireFox中設置HTML標簽的Style屬性時,所有位置、寬高和尺寸值必須后跟px,IE也支持此寫法,因此統一加px單位。如 Obj.Style.Height = imgObj.Style.Height + ‘px';
6. FireFox無法解析簡寫的padding屬性設置,如padding 5px 4px 3px 1px;必須改為 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0;
7. 消除ul、ol等列表的縮進時,樣式應寫成:list-style:none;margin:0px;padding:0px;其中margin屬性對IE有效,padding屬性對FireFox有效
8. CSS控制透明:IE:filter:progidXImageTransform.Microsoft.Alpha(style=0,opacity=60); FireFox:opacity:0.6;
9. CSS控制圓角:IE:不支持圓角; FireFox: -moz-border-radius:4px;或 -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -moz-border-radius-bottomleft:4px; -moz-border-radius- bottomright:4px;
10. CSS雙線凹凸邊框:IE:border:2px outset; FireFox: -moz-border-top-colors: #d4d0c8 white; -moz-border-left-colors: #d4d0c8 white; -moz-border-right-colors:#404040 #808080; -moz-border-bottom-colors:#404040 #808080;
11. IE支持CSS方法cursor:url()自定義光標樣式文件和滾動條顏色風格;FireFox對以上兩者均不支持
12. IE有Select控件永遠處于最上層的bug,且所有CSS對Select控件都不起作用
13. IE支持Form中的Label標簽,包括圖片和文字內容;FireFox不支持包含圖片的Label,點擊圖片不能讓標記 label for 的Radio或CheckBox產生效果
14. FireFox中的TextArea不支持onScroll事件
15. FireFox不支持display的inline和block
16. FireFox對Div設置margin-left, margin-right為auto時已經居中, IE中不行
17. FireFox對Body設置text-align時, Div需要設置margin: auto(主要是margin-left margin-right) 方可居中
18. 對超鏈接的CSS樣式設置最好遵從這樣的順序:L-V-H-A。即 這樣可以避免一些訪問過后的超鏈接就不具備hover和active樣式了
19. IE中設置長段落自動換行在CSS中設置word-wrap:break-word;FireFox中使用JS插入的方法來實現,具體代碼如下:
20. 在子容器加了浮動屬性后,該容器將不能自動撐開解決方法:在標簽結束后下一個標簽中加上一個清除浮動的CSS clear:both;
21. 浮動后IE6解釋外邊距為實際邊距的雙倍解決辦法:加上display:inline
22. IE6下圖片下方會有空隙解決辦法:為img加上display:block或設置vertical-align 屬性為vertical-align:top | bottom |middle |text-bottom
23. IE6下兩個層中間有空隙解決辦法:設置右側div也同樣浮動float:left或者相對IE6定義 margin-right:-3px;
24. LI中內容超過長度后以省略號的顯示方法 (只適用與IE)
25. 將元素的高度和行高設為相同值,即可垂直居中文本
26. 對齊文本與文本輸入框,須在CSS中增加vertical-align:middle;屬性設置
27. 支持WEB標準的瀏覽器設置了固定高度值就不會像IE6那樣被撐開,但是又想設置固定高度又想能夠被撐開呢?解決辦法是去掉height屬性而設置 min-height,為了兼容不支持min-height的IE6可以這樣定義: { height:auto!important; height:200px; min-height:200px; }
28. web標準中IE無法設置滾動條顏色解決辦法:在CSS中對body的設置改為對html的
29. IE6由于默認行高問題無法定義1px左右高度的容器,解決辦法:在CSS中對容器設置如:overflow:hidden | zoom:0.08 | line-height:1px
30. 給Flash設置透明屬性可使層顯示在Flash之上

現在就與新鴻儒客服交流

010 - 51267718

您也可進行在線咨詢或預約項目顧問
我要預約
在線咨詢
36棋牌官方下载 3d过滤器最新版本 pk10宝宝计划软件下载 赌博极速赛车是真的还是假的 南昌股指期货配资 黑龙江快乐十分台子 一分彩怎么玩能赢钱 股票融资余额和融资买入 香港最快开奖结果 理财平台被骗十多万能找回来吗 广东36选7历史开奖