浏览器补救办法,臭虫以及解决方案(第二部分)

解决|浏览器

IE 6

这个仅运行在Windows平台上的浏览器对许多CSS设计者/开发者来说简直就是毒药。自2001年发布以来,它的Trident引擎和CSS解析器没有升级过。跟Windows平台上的IE 5.x(首次发布于1999年)相比,最大的差别在于引进Doctype开关并在“标准模式”(Standards Mode)下修正了大量CSS1的臭虫。

因为它的引擎自首次发布以来都没有升级过,所以关于它的臭虫和解决方案的文档都基本完善了,您可以从http://www.positioniseverything.net/explorer.html找到更详细的信息。

只对IE 5+显示所需样式,可以使用Tan Hack,或者,也可以称之为* html Hack。

div {color: green;}* html div { /* IE5+将会使用它 */color: red;}

在(X)HTML中,html是根元素(即老大,它上面没有父元素了)。Tank Hack实际上是要选择一个元素(在这个例子中,是div),它属于html的后代,而这个html又是任何元素(您所看到的型号*)的后代。在理论上,这是不可以的,所以解析正确的浏览器都会忽略* html,但是似乎IE 5+还有实现了某些在html的父元素(是什么我们不得而知),从而讽刺地,意外地让我们可以解决很多难题,感谢Bill,大家面向太平洋方向鞠一躬……

至于对IE 5+隐藏样式,那真是太简单了,使用CSS2中的子选择符,相邻选择符,属性选择符等,IE都不可识别(CSS规范中也有说明,对于不可识别的都忽略,IE也有严格遵循规范的时候),从而忽略整条规则。比如:

body > #content {...}div + #content {...}div[id="content"] {...}

但是我并不建议您这么做,因为您要承担浏览器升级的风险。IE7已经支持这些“先进”的选择符,所以我不建议对过时的非兼容浏览器使用“先进”选择符来做修补工作。

当我们使用CSS hack和filter的时候,如果可以,仅对老式/过时/废弃的浏览器使用,不要对当前版本的浏览器使用,以免升级时失效。另外,我也希望使用hack和filter能够尽量合法(valid),能通过CSS校验器的检查。所以对于星号*/下划线_加属性(property,也叫性质),还有在属性和值之间添加空注释的非法hack,我不在这里提了,我也不建议你去查。针对这个问题,我建议大家可以看看CSSZenGarden创始人Dave Shea的Stop Hacking, or be Stopped。

那么,我们来列一下IE5+/Windows主要臭虫及解决方案,我希望在使用这个方案的时候,能考虑一下前面提到的Dave Shea和我的想法。

IE5+/Win的臭虫及解决方案一览表臭虫解决方案
在一个液态的(liquid)的盒内,跟在一个浮动的元素后的内容会莫名其妙消失(只有IE6会发生)。学名Peek-a-boo Bug.

给该盒定义height: 1%;(但要注意对IE 5.x/Mac隐藏)。

/*\*/ * html div {height: 1%;}/**/

这个就是有名的Holly Hack(救世hack?神圣hack?)。它通过给一个块设置一个十分小的高度值(1%几乎成了通用准则)来工作。但IE 5+/Win能够依据内容来扩展这个盒子到足够的高度,就是说,把height当作min-height来用。在大部分情况下,Holly Hack能够使IE5+/Win按照实质的行为来表现。

在列表元素(dl, ul, ol),定义在相对或浮动定位的块级元素的背景会消失。学名Disappearing List-Background Bug

给列表元素定义相对定位(但同样注意对IE5.x/Mac隐藏,因为它没有这个虫虫——相同名字,表现却咋这么不同呢?)

/*\*/ * html ul {position: relative;}/**/

尽管不是一个很有技术含量的hack,但使用position: relative;能够让你从IE5+/Win的大部分困境中解脱出来。同时很多场合下你也不愿意使用,因为它产生的块(block)或许是你不需要的,所以还是省着点用吧。

浮动元素内某些连接hover时,该元素的底部会被砍掉。学名Guillotine Bug

对包含元素使用Holly Hack.

一个相对定位元素内的绝对定位元素,其内容超出页面底部时不会触发滚动条。学名Unscrollable Content Bug.

对包含元素使用Holly Hack.

当多个浮动的元素彼此跟随,中间加注释的时候,最后一个浮动元素内的文本偶尔会复制到最下面去。学名Duplicate Characters Bug.

不要给浮动元素设置多宽度,使其不会到达包含元素的底部,或者对最后一个元素设置margin-right: -3px;或者更小。

浮动元素相同浮动方向上的边界是所设置值的两倍。

div {float: left;margin-left: 100px;}

为浮动元素设置display: inline;。注意:根据W3C的建议,除非值是none,否则不应该在浮动元素上使用display

一个块级元素内的文本跟浮动元素之间有一个3像素的间隔。学名Three Pixel Text-Jog Bug.

对块级元素使用Holly Hack.

内容中包含未达到底部的浮动元素,清除(clear)浮动的块级元素的padding-top会加倍。

给该清除浮动的元素使用Holly Hack.

相对定位容器内连接的background-image失效。

给连接相对定位。

一个有padding的盒子内嵌套一个有margin的盒子,外围盒子的padding-top和里面盒子的margin-top不会相加。

里面盒子的margin-top设置双倍值。

以下划线开头的class和id会被忽略。

防止以下划线开头命名class和id.

一个绝对定位元素的left值依据容器内第一个元素的左边缘计算,而不是容器本身。

根据实际情况调整left的值或者绝对定位容器。

table设置margin会被忽略(IE6忽略所有,IE5.x/Win只忽略margin-topmargin-bottom)。

table外包一个div,然后对该div设置margin.

你恨IE6不?它可以占据我这么多版面独成一部分……你恨IE不?前两部分都在写它们……实际上我们的第三部分会非常少,精华都在这一部分了。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索html
, 浏览器
, div盒子的切换
, 定位
, 浮动
, 元素
, 一个
5.x/Win
档案袋拆开了补救办法、喝完咖啡心慌补救办法、香肠酸了有办法补救吗、移动流量用超补救办法、联通流量用超补救办法,以便于您获取更多的相关知识。

时间: 2024-08-31 06:23:53

浏览器补救办法,臭虫以及解决方案(第二部分)的相关文章

浏览器补救办法,臭虫以及解决方案(第一部分)

解决|浏览器 如果世界是美好的,浏览器都没有缺点,W3C的规范清晰明了,而这篇文章也永远不会出现.Welcome to the real world. 在这篇文章中,我们将会探讨几个主流浏览器的在Web标准(或者CSS规范)下存在的典型问题/臭虫,提供相应的解决方案(hacks/filters). NN 4.x 很幸运我们生活在这个时代.这个10年前的古董浏览器,网景导航家(Netscape Navigator)4.x,终于只剩下0.3%的市场份额,大部分网站也声明不再支持.它有着最基本的CSS

浏览器补救办法,臭虫以及解决方案(第三部分)

解决|浏览器 Mozilla家族/Gecko 当上个世纪浏览器大战接近尾声,微软的IE实际上已经取胜,Netscape宣布它的浏览器开放源代码并成立了Mozilla组织.Mozilla组织放弃了所有Netscape Navigator的大部分代码,重写了引擎.这是一项艰苦的过程,Netscape没有能够在最快时间内发布它的新版浏览器,以致IE一家独大好多年.而被AOL收购后的Netscape,虽然在Mozilla的基础上发布过6.x, 7.x, 8.x的浏览器.但是除了忠实粉丝,加上Mozill

vc操作word时添加msword时少选了一些类,有什么补救办法吗?

问题描述 vc操作word时添加msword时少选了一些类,有什么补救办法吗? 在添加msword.olb时由于选择时没有选择书签类,我现在需要用书签怎么办?能不能不重新建工程还能添加进去的方法.

网站降权后的补救办法详解介绍

我也就结合自己的一些网站降权经历以及其他SEO的降权经历,总结一下网站降权后的几种补救办法.   由于网站降权有多方面的因素,那么我把他们分为主观因素和客观因素. 一.主观因素的降权 1.优化过度. 几年前只要在keywords标签中加入关键词,那么就容易获得关键词的排名,那时候绝大部分网站都在这么做,几大门户网站也是如此,因为被过度滥 用了,甚至是恶意使用的地步,所以直接导致了该标签被搜索引擎所放弃,现在由于该标签作用弱化,该标签的过度优化现象也很少见了. 另外,title标题标签的关键词堆叠

网站降权后的几种补救办法

摘要: 做过SEO的都清楚,SEO是一个长期的工作,因为网站权重的提高是需要积累才能慢慢提升的,一口是很难吃成大胖子的,反而会适得其反,但在实际操作过程中,总会因为各种各样的问题 做过SEO的都清楚,SEO是一个长期的工作,因为网站权重的提高是需要积累才能慢慢提升的,一口是很难吃成大胖子的,反而会适得其反,但在实际操作过程中,总会因为各种各样的问题,导致排名得不到上升,甚至是降权,于是乎很多SEOER逐渐的适应了一句话:做SEO没遇到过降权的不是好SEO,每每有人向他人请教降权的问题,第一句回应

模糊照片补救办法

  如果阁下有后制经验,一定知道用Photoshop救相并不是万能的,而其中有两个拍摄时的失误是一直以来也不能以后制的方式有效地补救︰ 失焦 (out of focus)与及手抖 (camera shake). 作为一个有经验的摄影师,一定非常重视拍摄的照片有没有犯上这两种毛病,而相机制造商亦在这两个课题上投入大量研究开发,发展出更精准的对焦系统与及更先进的防手抖技术去帮助摄影师减低失焦及手抖的可能. 虽然摄影科技已大大帮助了摄影人,但就算最老练的摄影师也会有失手的时候,万一一张重要的照片因手抖

设计模式 单例模式的缺陷和补救办法及应用场景2

本博原创禁止转载.拷贝.拍照等一切商业目地,否则将保留法律权利!    ---------linux-深圳-luo 缺陷: 1>单例模式只能修改代码来扩展,测试也难以捕获,与单一职责原则冲突 2>单例线程不安全 public class Singleton{    private static Singleton singleton=null;    //限制产生多个对象   private Singleton(){  }  public static Singleton getSigleto

Ajax保留浏览器历史的两种解决方案(Hash&Pjax)

总是在github down点东西,github整个界面做的不错,体验也很好~对于其中的源代码滑动的特效最为喜欢了~刚开始以为这个只是普通的ajax请求效果,但是发现这个特效能够导致浏览器地址栏跟随变化,并且再点击前进后退按钮后又可以将代码滑回滑出~~于是乎就来研究下吧~ 一.通过锚点Hash实现: 在这方面其实国内很早就有做了,比如淘宝画报,通过的是在地址栏后面加#锚点实现的,浏览器是可以识别锚点为单位的历史记录的.但不是说页面本身有这个锚点,锚点的Hash只是起到一个引导浏览器将这次的记录推

CSS浏览器兼容性的各种代码解决方案

网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了,因为IE 6.0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同,导致设计的页面效果不一样,所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢?广泛被使用的方法就是CSS Hack,即使用特别的CSS定义显示网页在不同浏览器的设计风格,针对不同的浏览器去写不同的CSS,最大化兼容浏览器.一般情况下,我都会兼顾IE 6.0 / IE 7.0 / firefox 2.0浏览器,下面是用