css 兼容性書寫記錄
2024-07-11 08:47:53
供稿：網友
從頁面開始布局設計初就考慮到各個瀏覽器的問題，留出充足的余量和給各個瀏覽器留出充足的發揮空間，這樣的頁面兼容性才是最好的。
下面就來幾個問題：
1、div border不能顯示
問題描述：用一個div A層中間放了幾個div B來存放內容，因為內容是不固定的，于是就使用了對B層使用了float，讓A層自適應高度，后面對A層加上邊框，在ie中能顯示，但是在firefox中就始終沒法顯示。
問題分析：B層使用了float，位置浮起，A層邊框不能顯示
解決方案：對A開始使用一個浮動清除<div style="clear:both"></div>
2、cms ie6的內容頁面不能全部顯示
問題描述：cms內容頁中ie6能顯示部分的內容，在其他瀏覽器中顯示能正常全部顯示
問題分析：查看代碼，其中有.content{height:auto !importan;height:500px;min-height:500px;}，應該是布局是為了好看，留下了500px的高度，其實內容頁自適應就可以了，在ie6中的min-height是不兼容的于是就是固定高度500px，超出后也不能顯示了。
解決法案：.content{height:auto;}高度自適應
3、關于margin和padding撐破外層div的問題
問題描述：使用div margin padding 布局，整體框架設定號，開始添加內容時使用了margin padding對內容定位，最終在ie6中將整個div撐破，排版打亂
問題分析：ie6中間margin+padding+border+height（width）=盒子的實際尺寸，于是開始設計的尺寸加上定位的margin和padding就導致了撐破div
解決方案：定位改為position定位，使用position="relative"相對于本身原位置定位，自身位置保留，相鄰div依靠原位置，定位可以把原來margin和padding多撐出位置重疊在一起，多出重疊部分無內容對用戶體驗上無影響。
4、使用jquery slidetoggle 出現閃爍問題
問題描述：使用jquery slidetoggle ie6和ie7出現閃爍問題
問題分析：查找資料 對slidetoggle 的子元素使用了position:relative position:absolute 等出現閃爍，自查原因使用了float:left出現閃爍
解決方案：解決方案：添加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">則可以解決問題，但是本句話前不能有其他注釋，開始未能解決時因為在頁面的開始有了一個空注釋（如問題5中），當問題5解決了，后面反思，得出了這個方案。
其實前面在網上也查了相關資料，解決法案正是如此，但是由于前面有一個空注釋，所以沒有出現效果，后面把空注釋解決了，才恍然醒悟。
5、靜態頁布局兼容大部分瀏覽器，加上動態數據后在ie6 和 ie7中居中的內容就偏左了
問題描述：做靜態頁布局時，很是仔細，因為知道不用css hack的布局做出來的兼容性才是最好的，于是很是仔細的做完，測試了各個瀏覽器，兼容性也很好，但加上數據后就出現偏移了。
問題分析：經過再三的堅持，發現，在輸出數據時，頁面的頭部多了一個<!---->空注釋，于是就偏移了。
解決方案：去除頁面開始的<!---->
6、使用jquery slidetoggle是子元素出現快于父元素出現和消失，但下拉還未完成，子元素出現一閃出現，給人以突兀的感覺
問題描述：使用了jquery slidetoggle 元素下剛開始下來是，子元素則一閃而現，即一點擊則出現，很是突兀
問題分析：經過查找，發現是子元素使用了position:relative的原因造成
解決法案：去除子元素中position:relative 的屬性
