成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

探究IE7beta2的CSS兼容性

開發 前端
CSS兼容性有很多值得學習的地方,于是我研究了一下IE7beta2的CSS兼容性,這里和大家分享一下,希望對你的學習有所幫助。

本文向大家介紹一下IE7beta2的CSS兼容性問題,MS在推出了IE7beta2發生了一些變化,改進和變化會導致一些原來正常網頁出現布局錯誤或者原來可以使用的Hack技巧不再可用。

IE7beta2的CSS兼容性

當IE7beta1推出的時候,我在第一時間對它作了個測試。當時發現它對CSS的支持幾乎沒有任何變化,著實失望了一陣。MS在最近推出了IE7beta2,這次有了不少新的改進和變化。但這些改進和變化會導致一些原來正常網頁出現布局錯誤或者原來可以使用的Hack技巧不再可用。MSDN在年初的時候把這些可能產生的問題羅列給開發者(這是原文),這里我把其中比較主要的問題簡單地描述一下,希望能對大家有所幫助。

  ◆注意,在IE7正版發布之前,以下提到所有內容都是有可能變化的。

盒模型變了,這恐怕是會讓那些使用Web標準建設大型網站的開發者感到背脊發涼的變化,不過不用太擔心,主要的變化是在盒模型對溢出(overflow)內容的處理方法。

  假設有一個100px寬100px高的盒子,在這個盒子里放一個200px寬200px高的圖片。目前IE的正理方法是自動把盒子“撐大”到200px見方。而IE7beta2的處理方法和FF是一致的:盒子不變,溢出的部分在盒子外面被渲染。也就是說盒子的overflow值真正地使用了W3C的默認值“visible”。

  如果你現有的布局是依賴于IE的“自動撐開”,那么要小心,很可能會出現問題(特別是動態內容的網頁)。

XML序言(prolog)可能會影響盒模型

  大家知道IE有兩種渲染模式:QuirksMode和StrictMode。QuirksMode基本上是非標準的,包括盒模型在內,它的渲染方式與W3C的標準有些出入。而StrickMode基本上是標準的(反正都不是絕對標準也不是絕對不標準……)。IE6及以前版本會根據寫在XHTML文檔第一行(也只能是第一行)的DocType聲明來選擇渲染模式。如果發現了一個它能識別的DocType,比如XHTMLTransitional或者XHTMLStrict等等,它就使用StrictMode來渲染。其他所有情況下都使用QuirksMode。

  有些開發者為了顯式地聲明他們的XHTML文檔是一個XML,會在文檔的第一行(問題就在這里,它也必須在第一行)加上XML的序言(prolog)。比如:

  1. <?xmlversionxmlversion=\"1.0\"encoding=\"gb2312\"?>   
  2.  

雖然初衷是為了讓文檔更“標準”,但由于IE不認這行字,結果還是按QuirksMode來渲染。

  IE7beta2解決這個問題,它會跳過prolog來看檢查DocType。所以可能會出現IE6及以下版本用QuirksMode渲染而IE7beta2用StrictMode渲染的情況。

  其實這個問題容易解決,在現有的環境下,把prolog直接刪掉就行了,實在是沒什么大的用處。當然想裝作在使用XHTML,事實上還是想用QuirksMode的人可能得好好想個新辦法了^_^

由于改進bug而失效的Hack技巧

*html
這是一個利用IEBug的Hack,如下的寫法只有IE會解析其中的內容:

*html{...}*htmlbody{...}現在IEbeta2將和大部隊一起把它們忽略掉。

◆下劃線Hack

這也是一個利用IEBug的Hack,如下的寫法只有IE會解析其中的內容:

  1. .myclass{  
  2. min-height:300px;  
  3. _height:300px;  
  4. }  
  5.  

現在IEbeta2將不再解析下劃線開頭的屬性,但是會把它當作一個“用戶自定義”屬性。自定義屬性并不能應用到表現上,但是它會存在于文檔模型中,可以使用腳本來訪問。(這個特性我還沒有測試過)

◆/**/注釋Hack

這是我最喜歡的Hack技巧之一了。如下的寫法在StrictMode下面會對IE6透明(IE5.x是會解析的),但是現在IE7beta2將會解析它:

  1. .myclass{  
  2. height/**/:300px;  
  3. }  
  4.  

由于增強功能而失效的Hack技巧
原來IE不支持以下寫法,現在可以了:

◆child選擇符Hack

  1. html>body{  
  2. height:300px;  
  3. }相鄰選擇符Hack  
  4. head+body{  
  5. height:300px;  
  6. }相鄰選擇符和first-child偽類選擇符  
  7. head:first-child+body{  
  8. height:300px;  
  9. }  
  10.  

這些都算不上什么壞消息,反正我從來不用這些Hack^_^

頁面混亂解決方案

  在MSDN的那篇文章上給出了一些解決方案,從我的角度來看都是些治標不治本、隔靴搔癢的方案。要不用JS來做CSS的工作,要不只針對IE來載入特定的CSS。所以建議大家:等!一等IE7的正式版,在正式版出來之前,什么都有可能變。二等偉大的CSS社區的牛牛們找出更多的Hack技巧。IE7不可能做得和FF一模一樣,也不可能和IE6一模一樣,反正總會有點不一樣的,就利用那點不一樣的東西來做Hack。

  雖然用各種Hack是件很無奈的事情,但現實就是這樣,我們在努力影響這個行業的同時只有好好適應它,所以私底下很希望能看到用中國人名字命名的Hack出現。

【編輯推薦】

  1. CSS2.0中最常用的18條技巧
  2. CSS層疊與繼承用法手冊
  3. DIV布局規范中CSS類及id命名方式
  4. 由淺入深學習CSS中margin屬性用法
  5. 將XHTML+CSS頁面轉換為打印機頁面技巧

 

責任編輯:佚名 來源: svn8.com
相關推薦

2022-03-01 17:24:33

iOS兼容性方案

2010-08-30 09:35:35

IE6IE7Firefox

2010-08-17 15:38:49

CSS兼容IE7IE8

2010-09-15 10:25:18

IE7IE8CSS兼容性

2009-02-19 13:59:00

2010-09-16 13:33:47

IE6IE7IE8

2010-08-20 13:22:21

IEFirefoxJavaScript

2009-11-19 08:55:44

Windows 7網絡兼容性

2009-02-25 09:22:01

Windows 7Client Beta兼容性

2010-08-17 15:26:38

IE7IE8CSS兼容性

2010-08-18 15:22:28

IE6IE7Firefox

2010-08-20 11:01:10

IE7IE8CSS

2010-08-17 15:33:28

CSS兼容IE7IE8

2009-03-07 09:49:07

Windows 7兼容性

2010-08-17 15:07:48

IE6IE7IE8

2010-08-20 09:25:11

IE6IE7IE8

2010-09-15 11:18:27

IE6IE7火狐

2010-09-15 11:26:05

IE火狐CSS兼容性

2010-08-20 14:27:23

IE火狐CSS

2009-03-06 08:54:25

EngineeringWindows 7兼容性
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板: 欧美一区二区三区在线观看视频 | 91av国产在线视频 | 国产做a爱免费视频 | 国产一区二区三区在线 | 精品国产乱码久久久久久88av | 欧美另类视频在线 | 免费能直接在线观看黄的视频 | 日韩视频a | 国产成人免费视频网站高清观看视频 | 久久亚洲一区二区三区四区 | 国产在线观看免费 | 99久久亚洲 | 国产成人久久精品一区二区三区 | 一本一道久久a久久精品蜜桃 | 午夜av成人 | 人人做人人澡人人爽欧美 | 欧美精品一区二区三区在线四季 | 欧美日韩一区二区三区视频 | 久久久久久久久久久蜜桃 | 久久国产精品一区二区三区 | 欧美在线看片 | 亚洲日韩中文字幕一区 | 久久国产精品一区 | 涩涩视频在线观看免费 | 超碰在线播 | 国产激情三区 | 国产精品久久久久久婷婷天堂 | 国产精品美女久久久 | 美女视频黄的免费 | 男女一区二区三区 | 久久1区| 国内自拍视频在线观看 | 亚洲高清成人 | 一区二区三区免费 | 一本大道久久a久久精二百 国产成人免费在线 | 青青草亚洲 | 免费黄色特级片 | 性做久久久久久免费观看欧美 | 国产91九色 | 欧美日韩综合精品 | 精品福利一区二区三区 |