標籤：
目前主流網頁布局設計中，CSS都佔有很重要的部分，但是面對一條條的CSS代碼，檢測成了問題，本文就此為大家介紹幾種檢查調試CSS布局的有效辦法。
1. 檢查HTML元素是否有拼字錯誤、是否忘記結束標記
即使是老手也經常會弄錯div的嵌套關係。可以用dreamweaver的驗證功能檢查一下有無錯誤。
2. 檢查CSS是否書寫正確
檢查一下有無拼字錯誤、是否忘記結尾的 } 等。可以利用CleanCSS來檢查 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?
CSS技巧編輯1.div的垂直置中問題： vertical-align:middle;將行距增加到和整個DIV一樣高： line-height:200px; 然後插入文字，就垂直置中了。缺點是要控制內容不要換行 。2. margin加倍的問題設定為float的div在ie下設定的margin會加倍。這是一個ie6都存在的bug。解決方案：在這個div裡面加上 display:inline;例如： <div id="imfloat"> 相應的css為 #imfloat{ float:left; margin:5px;/*IE下理解為10px*/ display:inline;/*IE下再理解為5px*/}[2] 3. 浮動ie產生的雙倍距離#box{ float:left; width:100px; margin:0 0 0 100px; /*這種情況之下IE會產生200px的距離, */ display:inline; /*使浮動忽略*/}這裡細說一下block與inline兩個元素：block元素的特點：總是在新行上開始，高度、寬度、行高、邊距都可以控制(塊元素)；Inline 元素的特點：和其他元素在同一行上，不可控制(內嵌元素)。4. IE與寬度和高度的問題IE 不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器裡這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等於沒有設定寬度和高度。 比如要設定背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣：#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}5. 頁面的最小寬度min -width是個非常方便的CSS命令，它可以指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個<div> 放到 <body> 標籤下，然後為div指定一個類，然後CSS這樣設計：#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。6.DIV浮動IE文本產生3象素的bug 左邊對象浮動，右邊採用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距.例：<style type="text/css">#box{ float:left; width:800px;//可以最佳化為#006;}#left{ float:left; width:50%;//可以最佳化為#060;}#right{ width:50%;}*html #left{ margin-right:-3px; //這句是關鍵}</style><div id="box"><div id="left"> </div><div id="right"> </div></div>7. IE捉迷藏的問題當div應用複雜的時候每個欄中又有一些連結，這個時候容易發生捉迷藏的問題。 有些內容顯示不出來，當滑鼠選擇這個地區是發現內容確實在頁面。解決辦法：對#layout使用line-height屬性或者給#layout使用固定高和寬。頁面結構盡量簡單。8.float的div閉合；清除浮動；自適應高度① 例1：<style type="text/css">.float_a,.float_b,.float_c { float:left; }.clear { clear:both; }</style><div class="float_a">內容1</div><div class="float_b">內容2</div><div class="clear"></div><div class="float_c">內容3</div>或者例2：<style type="text/css">.float_a,.float_b { float:left; }.fl_l { float:left;}.fl_r { float:right;}.clear:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }.clear { zoom: 1; }</style><div class="clear aa"><div class="float_a fl_l"><div class="float_a fl_r">這是內容</div></div></div>②作為外部 wrapper 的 div 不要定死高度，為了讓高度能自動適應，要在wrapper裡面加上overflow:hidden; 當包含float的 box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私人屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了相容。例如某一個wrapper如下定義： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}11.高度不適應高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用margin 或padding 時。例：<style type="text/css">#box { }#box p {margin:20px 0; text-align:center;//原樣式margin-top:20px; margin-bottom:20px; }</style><div id="box"><p>p對象中的內容</p></div>解決方案：在P對象上下各加2個空的div對象CSS代碼：.1{height:0px;overflow:hidden;}或者為div加上 border屬性。12 .IE6下為什麼圖片下有空隙產生解決這個BUG的方法也有很多，可以是改變html的排版，或者設定img 為display:block 或者設定vertical-align 屬性為 vertical-align:top | bottom |middle |text-bottom 都可以解決。13.如何對齊文本與文本輸入框加上 vertical-align:middle;<style type="text/css"><!-- input { width:200px; height:30px; border:1px solid red; vertical-align:middle;//垂直方向樣式是重點！} --></style>14.web標準中定義id與class有什麼區別嗎一、web標準中是不容許重複id的，比如 div id="aa" 不容許重複2次，而class 定義的是類，理論上可以無限重複，這樣需要多次引用的定義便可以使用他；二、屬性的優先順序問題 id 的優先順序要高於class，看上面的例子三.方便JS等用戶端指令碼，如果在頁面中要對某個對象進行指令碼操作，那麼可以給他定義一個id，否則只能利用遍曆頁面元素加上指定特定屬性來找到它，這是相對浪費時間資源，遠遠不如一個id來得簡單。15. li中內容超過長度後以省略符號顯示的方法 （此方法適用與IE與OP瀏覽器）<style type="text/css"><!-- li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } --></style>16. 為什麼web標準中IE無法設定捲軸顏色瞭解決辦法是將body換成html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "網址"><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css"><!-- html { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; } --></style>17. 為什麼無法定義1px左右高度的容器IE6下這個問題是因為預設的行高造成的。解決的方法也有很多，例如:overflow:hidden | zoom:0.08 | line-height:1px 。18. 怎麼樣才能讓層顯示在Flash之上呢解決的辦法是給Flash設定透明 <param name="wmode" value="transparent" />19. 怎樣使一個層垂直置中於瀏覽器中這裡我們使用百分比絕對位置，與外補丁負值的方法，負值的大小為其自身寬度高度除以二 。<style type="text/css"><!-- div { position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; } --></style>
css bug以及一些css排查方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
