搜索
首页web前端css教程指定网页的doctype解决CSS Hacking方法总结_经验交流

但是实际上,浏览器远远不止这几个,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

复制代码 代码如下:



  XHTML 1.1

复制代码 代码如下:



声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
每周平台新闻:Galaxy Store的Web应用程序,Tappable Stories,CSS Subgrid每周平台新闻:Galaxy Store的Web应用程序,Tappable Stories,CSS SubgridApr 14, 2025 am 11:20 AM

在本周的综述中:Firefox获得了类似锁匠的力量,三星的Galaxy Store开始支持Progressive Web Apps,CSS Subgrid正在Firefox发货

每周平台新闻:Internet Explorer模式,搜索控制台中的速度报告,限制通知提示每周平台新闻:Internet Explorer模式,搜索控制台中的速度报告,限制通知提示Apr 14, 2025 am 11:15 AM

在本周的综述中:Internet Explorer进入Edge,Google Search Console吹捧新的速度报告,Firefox提供了Facebook'

CSS自定义属性的范围的功率(和乐趣)CSS自定义属性的范围的功率(和乐趣)Apr 14, 2025 am 11:11 AM

您可能至少已经对CSS变量有点熟悉了。如果没有,这是两秒钟的概述:它们真的称为自定义属性

我们是程序员我们是程序员Apr 14, 2025 am 11:04 AM

构建网站正在编程。编写HTML和CSS正在编程。我是程序员,如果您在这里阅读CSS-Tricks,那么您很有可能是您

您如何从网站上删除未使用的CSS?您如何从网站上删除未使用的CSS?Apr 14, 2025 am 10:59 AM

在这里,我想预先知道的是:这是一个很难的问题。如果您降落在这里,因为您希望指向您可以运行的工具

图片中的图片网络API简介图片中的图片网络API简介Apr 14, 2025 am 10:57 AM

图片中的图片在2016年发行了Macos Sierra,在Safari浏览器中首次出现在网络上。这使用户可以弹出

使用Gatsby组织和准备图像以使图像模糊效果的方法使用Gatsby组织和准备图像以使图像模糊效果的方法Apr 14, 2025 am 10:56 AM

盖茨比(Gatsby)进行了出色的处理和处理图像。例如,它可以帮助您节省图像优化的时间,因为您不必手动

哦,嘿,填充百分比基于父元素的宽度哦,嘿,填充百分比基于父元素的宽度Apr 14, 2025 am 10:55 AM

今天,我学到了一些有关基于百分比的(%)填充的知识,我脑海中完全错了!我一直认为百分比填充是基于

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。