• <ruby id="5koa6"></ruby>
    <ruby id="5koa6"><option id="5koa6"><thead id="5koa6"></thead></option></ruby>

    <progress id="5koa6"></progress>

  • <strong id="5koa6"></strong>
  • ie6 ie7 ie8 共存以及Firefox瀏覽器CSS兼容寫法

    發表于:2012-03-30來源:java中文網作者:Mark Levison,張永濤點擊數: 標簽:軟件測試
    在網站設計的時候,應該注意css樣式兼容不同瀏覽器問題,特別是對完全使用DIV CSS設計的網,就應該更注意IE6 IE7 FF對CSS樣式的兼容,不然,你的網亂可能出去不想出現的效果!Java中文網海量權威開發資料,歡迎游客會員投稿。

      在網站設計的時候,應該注意css樣式兼容不同瀏覽器問題,特別是對完全使用DIV CSS設計的網,就應該更注意IE6 IE7 FF對CSS樣式的兼容,不然,你的網亂可能出去不想出現的效果!Java中文網海量權威開發資料,歡迎游客會員投稿。

      所有瀏覽器 通用

      height: 100px;

      IE6 專用

      _height: 100px;

      IE6 專用

      *height: 100px;

      IE7 專用

      *+height: 100px;

      IE7、FF 共用

      height: 100px !important;

      一、CSS 兼容

      以下兩種方法幾乎能解決現今所有兼容.

      1, !important (不是很推薦,用下面的一種感覺最安全)

      隨著IE7對!important的支持, !important 方法現在只針對IE6的兼容.(注意寫法.記得該聲明位置需要提前.)

      代碼:

      

      2, IE6/IE77對FireFox

      *+html 與 *html 是IE特有的標簽, firefox 暫不支持.而*+html 又為 IE7特有標簽.

      代碼:

      

      注意:

      *+html 對IE7的兼容 必須保證HTML頂部有如下聲明:

      代碼:

      

      二、萬能 float 閉合(非常重要!) 可以用這個解決多個div對齊時的間距不對,

      關于 clear float 的原理可參見 [How To Clear Floats Without Structural Markup]

      將以下代碼加入Global CSS 中,給需要閉合的div加上 class=”clearfix” 即可,屢試不爽.

      代碼:

      

      三、其他兼容技巧(相當有用)

      1, FF下給 div 設置 padding 后會導致 width 和 height 增加, 但IE不會.(可用!important解決)

      2, 居中問題.

      1).垂直居中.將 line-height 設置為 當前 div 相同的高度, 再通過 vetical-align: middle.( 注意內容不要換行.)

      2).水平居中. margin: 0 auto;(當然不是萬能)

      3, 若需給 a 標簽內內容加上 樣式, 需要設置 display: block;(常見于導航標簽)

      4, FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.

      5, ul 標簽在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導航標簽和內容列表)

      6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應.

      7, 關于手形光標. cursor: pointer. 而hand 只適用于 IE.貼上代碼:

      兼容代碼:兼容最推薦的模式。

      /* FF */

      .submitbutton {

      float:left;

      width: 40px;

      height: 57px;

      margin-top: 24px;

      margin-right: 12px;

      }

      /* IE6 */

      *html .submitbutton {

      margin-top: 21px;

      }

      /* IE7 */

      *+html .submitbutton {

      margin-top: 21px;

      }

      什么是瀏覽器兼容:當我們使用不同的瀏覽器(Firefox IE7 IE6)訪問同一個網站,或者頁面的時候,會出現一些不兼容的問題,有的顯示出來正常,有的顯示出來不正常,我們在編寫CSS的時候會很惱火,剛修復了這個瀏覽器的問題,結果另外一個瀏覽器卻出了新問題。而兼容就是一種辦法,能讓你在一個CSS里面獨立的寫支持不同瀏覽器的樣式。這下就和諧了。呵呵!

      最近微軟發布的IE7瀏覽器的兼容性確實給一些網頁制作人員添加了一個沉重的負擔,雖然IE7已經走向標準化,但還是有許多和FF不同的地方,所以需要用到IE7的兼容,有許多朋友問過IE7的兼容是什么,其實我也不知道。暫時還沒找到IE7專用的兼容。除了前面那片文章,《針對firefox ie6 ie7的css樣式》中的兼容方式也是很好用的。 本文內容來源中文Java開發網http://www.javaweb.cc/ 歡迎游客會員投稿

      有一點邏輯思想的人都會知道可以用IE和FF的兼容結合起來使用,下面介紹三個兼容,例如:(適合新手,呵呵,高手就在這里路過吧。)

      程序代碼

      第一個兼容,IE FF 所有瀏覽器 公用(其實也不算是兼容)

      height:100px;

      第二個兼容 IE6專用

      _height:100px;

      第三個兼容 IE6 IE7公用

      *height:100px;

      介紹完了這三個兼容了,下面我們再來看看如何在一個樣式里分別給一個屬性定義IE6 IE7 FF專用的兼容,看下面的代碼,順序不能錯哦:

      程序代碼

      height:100px;

      *height:120px;

      _height:150px;

      下面我簡單解釋一下各瀏覽器怎樣理解這三個屬性:

    原文轉自:http://www.kjueaiud.com

    老湿亚洲永久精品ww47香蕉图片_日韩欧美中文字幕北美法律_国产AV永久无码天堂影院_久久婷婷综合色丁香五月

  • <ruby id="5koa6"></ruby>
    <ruby id="5koa6"><option id="5koa6"><thead id="5koa6"></thead></option></ruby>

    <progress id="5koa6"></progress>

  • <strong id="5koa6"></strong>