項目中的一些css問題總結

Bug-IE6:

項目背景：tab實現

html：

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
ul{ height : 25px; _overflow:hidden;//很重要! border-bottom : 2px solid #ccc;}li{ height : 24px; border-width : 1px 1px 0 1px; .....}li.current{ border-width : 3px 1px 0 1px; .....}

bug表現：li沒法超出ul的高度以便將ul的下邊框擋住，z-index、margin-top什麼的都是浮雲...

解決方案：給li設置position:relative,讓他脫離標準流，固然，須要設置top:2px,至此該bug解決。

Bug-IE:

項目背景：作字體居中顯示的表格

html:

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
<tr> <td class="w100">...</td> <td class="w150">...</td> <td class="w50">...</td></tr>td{ text-align : center;}

bug表現：若是table的實際寬度不是300px;就算td設置爲字居中顯示，在IE裏也不會居中。

解決方案：至少留一個td寬度不設置而讓其自適應

Bug-Ie6:

bug表現：在IE6中，外層爲relative，內層爲absolute後，內層設置height：100%無效。

解決方案：外層div設置overflow:hideen;內層設置height爲9999;這樣各瀏覽器兼容。

Bug-IE6:

bug表現：由於呈現須要，在iframe指向的頁面內放了<!--[if IE6]>......<![End if]>,竟致使IE6中彈出該iframe時一片空白。

解決方案：iframe的src指向的頁面不能包含相似腳本。固然沒有問題。

Bug-IE6/7:

html:

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
<div style="margin-left:110px"> <p> <input type="text"/> </p></div>

bug表現：input會繼承外層div的margin。

解決方案：input加樣式_margin-left:-110px;

Bug-IE6:

html:

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
<input type="submit" class="button" value="提交"/>.button{ display:inline-block; width:100px; height:20px; overflow:hidden; cursor:pointer; background:none; background-image:url(/images/buttons.png?v=2.1.0); background-repeat:no-repeat; overflow:hidden;}

bug描述：submit中的文字會顯示一道黑點。

解決方案： 給button添加樣式：line-height:0; font-size:0;border:none;

Bug-IE6:

bug描述：若是頁面使用了DD-delated來兼容透明圖片，某些元素的background-position會和FF中的表現不一致。

解決方案：須要將該文件涉及的標籤改一下（在DD-delated設置中），以統一IE中的效果。

Bug-IE6/7/8

bug描述：當iframe中的div 沒有貼緊iframe邊界，此時IE六、7會顯示html的白色背景（iframe頁面中的白色背景），經測試：不是Iframe的背景。

解決方案：給body加background:none,html加background:none（由於FF不支持html的background的opacity設置，測試時opacity是無效的）,background:#000;filter:alpha(opacity=75)(這個是由於外面是黑色75透明底)，但此方案再IE8下也存在問題，經上網查找，設置iframe中的body的background:transparent,iframe的allowtransparency="true",截止至此，bug解決。透明的iframe沒法遮擋select，因此解決方案只能是隱藏select（在js設置）。

bug-IE6:

bug描述：div的margin-top有時會失效（當爲body子元素時）。

解決方案：設置爲position:relative,加入top屬性來解決了。

對齊問題：

html：

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
<li> <label>....</label> <input type="text" /> <span>.....</span></li>

針對<span>中的提示信息，常常與前面的信息對不齊，IE八、九、10，FF，chrome，IE6，7基本都有誤差，除了使用position:relative個別調整外，必定要使用vertical-alian:middle，效果顯著，基本都解決掉了。至於前面label和input使用相同的高度，配合line-height基本效果還好。

bug-IE6

html:

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
<div style="display:block"> <p style="background:url(....) ..... no-repeat">........</p></div>

bug描述：當用js控制div顯示時（用show()方法），p的背景沒法顯示

解決方案：此時在div上加入position:relative解決。

bug-IE6:

html：

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
<table> <tr> <td colspan="9"> <p>沒有相應記錄</p> </td> </tr></table>p{ display:inline-block; zoom:1; vertical-align:middle; background:url(...) ... no-repeat; text-indexnt:20px; .....}

bug描述：p爲行內塊級元素，但在IE6中，P沒有自動收縮，而是佔據了一行，前面的圖標在行的最左側。

解決方案：設置p display:inline;_zoom:1 .或者用span代替P標籤。

bug-IE6

html:

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
<a class="step"> <b>.....</b> <span class="title">....</span></a>.step:hover{ .....}.step:hover b{ background-position:-32px -243px;}.step:hover .title{ color:#000;}

bug描述：b改了background-position屬性，在IE6下該改變沒有生效。

在該標籤加了color、border、font-size等屬性或在background-position後面加!important試圖觸發該樣式的改變，始終沒有生效。

解決方案：加屬性border-bottom:1px solid #f7f7f7;即該樣式確實是能看到效果的，只是調整爲真實狀況下和不加該樣式沒差異。

網站ICon設置：
favicon.ico放在網站根目錄。
在網頁上設置
此方式兼容IE6+\FF\chrome。 通常IE會等幾天才顯示出來該圖標。

實現以下的劇中(兼容IE8+)

html:

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
<div class="shadowSquare fl ml20 tc"> <p class="f14"> 累計獎勵金額: <span class="redText1">100</span> <br/> 預計分紅金額: <span class="redText1">100</span> <br/> 實際總收入: <span class="redText1">100</span> </p> </div>

style:

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
.shadowSquare{ box-shadow:2px 3px 5px #ccc; width:245px; height:130px; background-color:#fff; display:table}.shadowSquare p{ display:table-cell; vertical-align:middle; color:#4d4d4d}

IE6bug:

一、代碼&&效果以下：

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
.myxyLeftMenu .list dt,.myxyLeftMenu .list dd{ height:30px; line-height:30px; background-color:#ccc}.myxyLeftMenu .list dd a{ display:block; color:#333; text-indent:43px; width:100%; background-color:pink}

二、代碼&&效果以下：

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
.myxyLeftMenu .list dt,.myxyLeftMenu .list dd{ height:30px; line-height:30px; background-color:#ccc}.myxyLeftMenu .list dd a{ display:inline-block; color:#333; text-indent:43px; width:100%;  background-color:pink}

兩者區別就在display屬性上。

bug-IE6

問題描述：IE6不支持負margin

解決方法：給該元素添加position:relative

佈局問題：

解決方法：根據padding + 絕對定位的方式將兩個圖標掛在兩邊。

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
.wrap{ height:25px; position: relative; padding:0 80px 0 40px}.UI-money { position: absolute; top: -5px; left: 0 }.UI-cuteGirl { position: absolute; top: -35px; right: 0}```javascript#####IE6bug:######問題描述：當元素不設置width和height的狀況下，僅僅依靠內部元素撐起。此時該元素又剛好是position:relative做爲內部absolute元素的定位參考元素，那麼在IE6下面，內部的定位會從除去padding的位置開始按照left top來作定位，而其它瀏覽器都是按照padding在內的位置開始計算，這纔是正確的顯示。######解決方法：將該外層元素(即position爲relative的元素)設置zoom:1觸發layout，那麼IE6將呈現與其餘瀏覽器一致的狀態。> 沒有設置zoom時的狀態：<img src="deb1a09a-21d6-412c-928a-5c435d13c0b1_files/86b5a548-6e4f-4a84-97ba-cffdbb533191.png" border="0" alt="" name="" height="41" width="284">> 設置完zoom的狀態：<img src="deb1a09a-21d6-412c-928a-5c435d13c0b1_files/2234b90b-339d-49be-a96e-cceb3f3082ac.png" border="0" alt="">######關於浮動的問題：* 若是外層的尺寸固定，那麼內部有兩個float也無所謂，此時用不到外層隨內層適應的問題。* 當若是外層的尺寸需隨浮動的子元素自適應高度，那麼能夠這樣解決：```javascriptdiv1{ float:left; width:22px; height:100%; margin-right:10px; _margin_right:-3px; //解決IE6下的3像素bug}div2{ display:inline-block;}

此時外層元素隨div2的高度自適應，但此時的問題是：
若是左側浮動元素div1的高度設置了100%，但實際上它沒法達到外層元素的高度，也就是沒法計算，由於外層元素的高度沒有顯式定義。
但若是此時你明肯定義過div2的高度，那麼你就可使用這種方式作浮動佈局。
值得一提的是，就算外層設置上min-height，內部的左側浮動元素依然沒法設置100%高度佈局，可是你可使用這種方式使佈局更整齊。IE6除外。

• 在外層不使用min-height的狀況下，IE6&7中外層元素會自適應到左側浮動元素的高度，但其餘瀏覽器中外層元素則不會按左側元素自適應，只會按右側元素自適應。
  min-height的問題若是使用hack這樣修復後：

     
     
     
     
     
  
      
      
      
      
      
  
      
      
      
      
      
  
      
      
      
      
      
  
      
      
      
      
      
  
      
      
      
      
      
  
     
     
     
     
     
  { height:auto!import; height:1100px; min-height:1100px;}

  方案解釋：以上代碼指定在除IE6的瀏覽器中，height爲1100px且是auto的，IE6下由於不識別!import，那麼IE6只會使用到height:1100px這個樣式，那麼將達到min-height:1100px的效果，由於若是內部的元素的高度大於這個高度，IE6下外層元素依然會被撐起。

• 讓咱們再來看看這個解決方案，在IE6下，由於使用了height樣式且爲固定的值，那麼內部元素的百分比高度得以被計算。但在其餘瀏覽器中，因爲咱們實際使用的樣式是height:auto和min-height,那麼將不會使得左側浮動元素獲得正確的100%的高度。

  最後仍是回顧下clearfix這個終極方案：

      
      
      
      
      
  
       
       
       
       
       
  
       
       
       
       
       
  
       
       
       
       
       
  
       
       
       
       
       
  
       
       
       
       
       
  
       
       
       
       
       
  
       
       
       
       
       
  
       
       
       
       
       
  
       
       
       
       
       
  
      
      
      
      
      
  .clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}.clearfix{*zoom:1;}

  它大體就是利用:after僞屬性來給外層元素加一個after塊級後置元素，並設置該子元素爲不可見，並在上面設置clear:both清楚浮動，來使得父元素能夠高度自適應。而*zoom:1是考慮到IE6&7不支持:after僞屬性。

百分比寬高的渲染

• 若是一個元素內部有定位元素且該定位元素是按百分比定義width和height:

  那麼在IE6下，若是外層元素的寬高沒有顯式定義，那麼內部的定位元素的百分比寬高將不會被渲染，其餘瀏覽器則均可以按照外層元素的實際高度進行渲染。
  可是對於非定位元素，若是外層僅僅由於內部元素使得自身高度被撐起，此時內部的子元素若是設置了height:100%，那麼將不會按100%進行和該父元素同樣的高度渲染。這個特性並不會由於該子元素的浮動屬性有所改變。

img與塊級元素

• 當用負邊距作這麼一個佈局：
  

能少則少，因此使用了這樣的html:

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
<div> <img src='' id='left'/> <div id='right'></div></div>

樣式能夠這樣:

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
img{ float:left; margin-left:-100px;}

也就是說，咱們不用對IE6作任何的hack就能夠解決問題。

但若是將img的樣式改爲這樣:

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
{ float:left; display:block; margin-left:-100px; _position:relative; _margin-left:-50px;}

也是OK的，也就是說,img不少時候表現得像一個塊級元素，但它和塊級元素的渲染仍是有差異。

若是img是用一個div標籤寫的，那麼該標籤的樣式應該是：

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
#left{ float:left; margin-left:-100px; _position:relative; _margin-left:-50px;}

或這樣：

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
{ float:left; margin-left:-100px; _display:inline}

也是OK的。

DDpng引發的問題

問題描述：當圖片起初爲display:none, 然後又被腳本顯示出來時，IE6下的png會仍然沒法顯示出來。

解決方案：每次將處於這些狀況下的圖片進行處理，要麼使用jpg，要麼控制其不使用DDpng的處理，很挫哈，沒辦法哎...

來自爲知筆記(Wiz)