DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 讓FireFox與IE兼容 CSS常見問題大全(2)
讓FireFox與IE兼容 CSS常見問題大全(2)
編輯：CSS詳解     

10.web標准中定義id與class有什麼區別嗎

一.web標准中是不容許重復ID的。

比如 div id="aa" 不容許重復2次,而class 定義的是類,理論上可以無限重復, 這樣需要多次引用的定義便可以使用他.

二.屬性的優先級問題。

ID 的優先級要高於class,看上面的例子。

三.方便JS等客戶端腳本。

如果在頁面中要對某個對象進行腳本操作,那麼可以給他定義一個ID,否則只能利用遍歷頁面元素加上指定特定屬性來找到它,這是相對浪費時間資源,遠遠不如一個ID來得簡單.

11.如何垂直居中文本

將元素高度和行高設為一致。

  1. <style type="text/CSS">     
  2. <!--      
  3. div {     
  4.     height:30px;     
  5.     line-height:30px;     
  6.     border:1px solid red     
  7.     }     
  8. -->     
  9. </style>    
  10.  
  11. <style type="text/CSS"> 
  12. <!--   
  13. div {  
  14.     height:30px;  
  15.     line-height:30px;  
  16.     border:1px solid red  
  17.     }  
  18. --> 
  19. </style>

12.如何對齊文本與文本輸入框 

  1. 加上vertical-align:middle;   
  2.  
  3. <style type="text/CSS">     
  4. <!--      
  5. input {     
  6.     width:200px;     
  7.     height:30px;     
  8.     border:1px solid red;     
  9.     vertical-align:middle;     
  10. }      
  11. -->     
  12. </style>    
  13.  
  14. <style type="text/CSS"> 
  15. <!--   
  16. input {  
  17.     width:200px;  
  18.     height:30px;  
  19.     border:1px solid red;  
  20.     vertical-align:middle;  
  21. }   
  22. --> 
  23. </style>

13.為什麼FF下面不能水平居中呢

FF下面設置容器的左右外補丁為auto就可以了。

  1. <style type="text/CSS">     
  2. <!--      
  3. div {     
  4.     margin:0 auto;     
  5. }     
  6. -->     
  7. </style>    
  8.  
  9. <style type="text/CSS"> 
  10. <!--   
  11. div {  
  12.     margin:0 auto;  
  13. }  
  14. --> 
  15. </style>

14.為什麼FF下文本無法撐開容器的高度

標准浏覽器中固定高度值的容器是不會象IE6裡那樣被撐開的,那我又想固定高度,又想能被撐開需要怎樣設置呢？辦法就是去掉height設置min-height:200px; 這裡為了照顧不認識min-height的IE6 可以這樣定義:

  1. {     
  2. height:auto!important;     
  3. height:200px;     
  4. min-height:200px;     
  5. }    
  6.  
  7. {  
  8. height:auto!important;  
  9. height:200px;  
  10. min-height:200px;  
  11. }

15.為什麼IE6下容器的寬度和FF解釋不同呢

  1. <?XML version="1.0" encoding="gb2312"?>     
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-strict.dtd">     
  3. <meta http-equiv="Content-Type" content="text/Html; charset=gb2312" />     
  4. <style type="text/CSS">     
  5. <!--     
  6. div {     
  7.     cursor:pointer;     
  8.     width:200px;     
  9.     height:200px;     
  10.     border:10px solid red     
  11.     }     
  12. -->     
  13. </style>     
  14. <div ōnclick="alert(this.offsetWidth)">web標准常見問題大全</div>    
  15.  
  16. <?XML version="1.0" encoding="gb2312"?> 
  17. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-strict.dtd"> 
  18. <meta http-equiv="Content-Type" content="text/Html; charset=gb2312" /> 
  19. <style type="text/CSS"> 
  20. <!--  
  21. div {  
  22.     cursor:pointer;  
  23.     width:200px;  
  24.     height:200px;  
  25.     border:10px solid red  
  26.     }  
  27. --> 
  28. </style> 
  29. <div ōnclick="alert(this.offsetWidth)">web標准常見問題大全</div>

問題的差別在於容器的整體寬度有沒有將邊框（border）的寬度算在其內,這裡IE6解釋為200PX ,而FF則解釋為220PX,那究竟是怎麼導致的問題呢？大家把容器頂部的XML去掉就會發現原來問題出在這,頂部的申明觸發了IE的qurks mode。

16.為什麼web標准中IE無法設置滾動條顏色了

解決辦法是將body換成Html：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-strict.dtd">     
  2. <meta http-equiv="Content-Type" content="text/Html; charset=gb2312" />     
  3. <style type="text/CSS">     
  4. <!--      
  5. Html {     
  6.     scrollbar-face-color:#f6f6f6;     
  7.     scrollbar-highlight-color:#fff;     
  8.     scrollbar-shadow-color:#eeeeee;     
  9.     scrollbar-3dlight-color:#eeeeee;     
  10.     scrollbar-arrow-color:#000;     
  11.     scrollbar-track-color:#fff;     
  12.     scrollbar-darkshadow-color:#fff;     
  13.     }     
  14. -->     
  15. </style>    
  16.  
  17. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-strict.dtd"> 
  18. <meta http-equiv="Content-Type" content="text/Html; charset=gb2312" /> 
  19. <style type="text/CSS"> 
  20. <!--   
  21. Html {  
  22.     scrollbar-face-color:#f6f6f6;  
  23.     scrollbar-highlight-color:#fff;  
  24.     scrollbar-shadow-color:#eeeeee;  
  25.     scrollbar-3dlight-color:#eeeeee;  
  26.     scrollbar-arrow-color:#000;  
  27.     scrollbar-track-color:#fff;  
  28.     scrollbar-darkshadow-color:#fff;  
  29.     }  
  30. --> 
  31. </style>
CSS詳解
CSS 高度
CS
HTML DOM padding 屬性的定義和用法
文和大家重點討論一下Html DOM padding 屬性的用法， padding 屬性主要用來設
關於W3C CSS標准的一些經驗
總結出關於W3C CSS標准的一些經驗：　　一、少用偏門。類似break-Word斷行，z-ind

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
實例講解定位Position Opera下cloneNode的bug CSS基礎語法教程 有趣的按鈕（會縮小放大） 三角形翻轉效果 CSS偽元素before和after制作時尚焦點圖相框 使用CSS實現outline切換的動畫效果 CSS設計制作長度高度不一樣的網頁區塊 兩個CSS代碼精簡工具(網頁教學網推薦) DIV+CSS佈局代碼精簡對SEO的影響
熱門推薦
IE與Firefox在獲得對象上的區別(1) 偽清除浮動 定義未來Web樣式 CSS 3最新特性一覽(2) 網頁中Span和Div的區別 XHTML頭部Doctype聲明必不可少！ CSS技巧！像table一樣布局div 文字寫在邊線上的效果用CSS實現的特效代碼 CSS寫法:不同組合間的優先級及浏覽器的支持性 跟初學者分享：學習css需要什麼軟件
大家都在看
firefox下獲取下列框選中option的text的代碼 JavaScript和CSS的優化提高網站性能 深入理解vue.js雙向綁定的實現原理 CSS技術在網頁設計中的運用 js剪切板應用clipboardData實例解析 網易首頁改版:提高用戶體驗的簡約大氣包容設計 html頁面嵌套使用示例(frameset使用方法) XUL 教程 創建一個窗口
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved