指定網頁的doctype解決CSS Hacking方法總整理_經驗交流

WBOY
發布: 2016-05-16 12:04:30
原創
1364 人瀏覽過

但實際上,瀏覽器遠遠不止這幾款,Firefox分為Firefox 1.5,Firefox 2,Firefox 3幾個主要版本,IE7,IE6中也各有好幾個系列,另外除開這兩個主流廠商的產品之外,還有Opera,Konqueror,Netscape,chrome等一系列。

  這些瀏覽器,各有各的一套,往往在這裡運作正常,在那裡運作就不正常了。於是WD們拆東邊補西邊,終於能在幾個瀏覽器下都正常了。結果,產品經理又有了新的需求,需要在哪裡哪兒那兒改一下,於是乎,好不容易糊弄好的的紙架子一下子倒塌了,WD們又忙得焦頭爛額。之所以這麼說,因為,這是我的經驗。

  大凡是WD,總是收集了一堆Css Hacking 技巧,為的是在各個瀏覽器下正常。網上一搜,一大堆。

  然而,首先WD們沒有弄清楚一個基本問題,我們為什麼需要css Hacking?如果有1000種瀏覽器,我們是不是要記住1000種瀏覽器的Hack 技巧?

  事實上, Css Hacking從某種程度上說,是一個拿不上檯面的東西。 Css Hacking有很多技巧,純粹就是利用了瀏覽器的Bug.例如常見的用_class{….} 去區別IE和firefox,按理說_class是一個不合法的標記方法。 Css Hacking的出現,是WD們不得已而為之,WD們的日常工作並不是瘋狂地Css Hack.

  其實這麼多瀏覽器,並不是可以隨便亂來,想自己定義個啥就定義個啥標記的。人們習慣了在標準的世界裡生活,在網頁世界裡,也有一系列標準。瀏覽器們也都努力做到web標準相容。但有些瀏覽器出道得早,可以說後來出現的web標準就是在它們的影響下誕生的。還有一個,當年非常牛B,所以做了很多創新,沒有把web標準放在心上,蠻不在乎。更何況,標準本身也是在不斷更新的。因此,一般各瀏覽器產品系統都曾有過一段沒有不太在乎web標準的日子,後來大家都意識到不行了,我們大家都妥協一下,要製訂一套標準,大家都遵守。可是以前各家都有自己製訂的一些小條條小框框,他們不符合標準,咋辦呢?

  於是,這些人想了個法子:標準模式和怪異模式。另外還有一種,叫「近乎標準模式」,almost standard.要說真是夠怪異,我都聽暈了。別急,聽我慢慢道來。

  不是說了嗎,這些老大們坐在一起,制定了各式各樣的標準,以後大家都按這套標準來解釋網頁。如果你做的網頁可以用這套標準來解釋,那就用一個標記doctype註明這是可以用web標準來解釋的。這就是標準模式。

  那以前各家都生產過,規定過的小九九們不符合標準,咋辦啊?也不能就馬上把它們全扔掉不要了吧?軟體上大抵有這樣一套原則,叫向下兼容。在怪异模式下,各个浏览器都模拟那些老版本的浏览器的操作,以防止老的页面无法工作。在网页没有指定doctype时,浏览器一般就都按怪异模式工作,以防老页面无法工作。

  对于这两种模式之间的差异,最显著的例子涉及Windows上IE专有的框模型。在IE 6出现时,在标准模式中使用正确的框模型,在怪异模式中使用老式的专有框模型。为了维持对IE 5和更低版本的向后兼容性,Opera 7和更高版本也在怪异模式中使用有缺点的IE框模型。

  Mozilla和Safari还有第三种模式,称为“几乎标准的模式(almost standards mode)”,除了在处理表格的方式方面有一些细微的差异之外,这种模式与标准模式相同。

  正是由于这个原因,您可以丢掉很多css hacking技巧了。有些书介绍说,IE6和firefox的盒模型(或者有的地方叫框模型)不一致,因此需要这样做hack:

div{
width:100px;
*width:95px;
}

  我说,这种书真是误人子弟。因为,只要正确指定了doctype,这些浏览器解释上的差异就都不存在了,我们按照标准来就行了。

  这个模式的指位于HTML文件开头的DOCTYPE域指定的。一般常见的有这几种:

HTML 4.01 Transitional:

复制代码代码如下:




HTML 4.01 Frameset

复制代码代码如下:




  XHTML 1.0 Strict

复制代码代码如下:




XHTML 1.0 Transitional

复制代码代码如下:




  XHTML 1.0 Frameset

複製程式碼程式碼如下:


div>
  XHTML 1.1

複製程式碼程式碼如下:



相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!