IE7与web标准设计(3)

2016-02-19 23:39 8 1 收藏

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的IE7与web标准设计(3)教程,一起来看看吧!超容易上手~

【 tulaoshi.com - Web开发 】

上文:IE7与web标准设计(2)

IE历来被web标准的拥护者所诟病,而当FireFox横空出世以后,更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升,微软终于推出了IE7。但IE7是否真的能够力挽狂澜,是否真的能够得到用户的信任,是否真的能够得到网页设计者的认可呢?

且看《IE7的web标准之道》系列文章,和你一起见证IE7的改变!

前言

现在,最令网页设计者头痛的问题就是网页在各个浏览器中的兼容性。而兼容性差最长见的,也是最令人恐惧的便是页面布局混乱。常常一个页面在IE6下显示的非常完美,而到了IE7(或者FireFox)中,则惨的不堪入目。到底是什么让这些页面那么的水土不服呢?

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

其实,这些都是IE6酿下的恶果,IE6对web标准的支持过于不足,甚至理解的有偏差,才导致了这些页面的脆弱。而IE7则修正了很多的那种IE6对css解释和渲染的bug。这种bug有很多。今天,这里只讲其中一个,但是确是最重要的一个,很多的十分混乱的页面都是它造成的。可以不客气地说,它简直就像页面布局混乱黑帮的幕后黑手,是引起页面布局混乱的祸首之一,而且是最大的一个。 它就是潜伏在网页背后的‘overflow:visible’IE6渲染bug。

不堪入目的网页截图

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

如果只是简单的说‘overflow:visible’IE6渲染bug,你可能完全没有印象。但是看看下面的这些不堪入目的网页截图,便能引起你心中那无限的伤感

图:这是在IE6中显示的效果截图,十分完美

这是在IE7中显示的不堪入目的效果截图

上面的两张截图,是我2007年在高达软件公司的真实项目截图。可以看出,在IE7下的显示已经严重变形,虽然不影响软件的功能使用,但是已经严重的影响了用户的使用体验(没有人喜欢拖动横向滚动条)。

来源:http://www.tulaoshi.com/n/20160219/1630301.html

延伸阅读
标签: Web开发
一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) style #wrapper { width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ } /style 2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支...
标签: Web开发
在IE7的开发中,据说新增加了一个Native对象——XMLHttpRequest。怎么难道开发IE7的"新警察"不知道IE6们都用ActiveX对象XmlHttp吗?XmlHttp出了什么问题,IE7为什么要这么做?原来一切就为了一个简单的兼容而已,但让人感慨颇多。     IE7提供XMLHttpRequest对象后,当然会继续支持ActiveX对象XmlHttp,这是微软这么几十...
标签: Web开发
老家的电脑是IE7浏览器,回来一瞅自己的博客,顶部,图形导航链接全部失效。 回想在网上看过的一篇文档,大意就是,如果在IE7中使用position:relative属性,需要在该元素的容器上,同时给予position:relative属性。 我给了。大按钮上的链接都恢复了。但是css"js"seo3个小按钮上没有链接。很诡异 又给了z-index属性,这下firefox...
标签: Web开发
1、DOM WEB标准现在可真是热门中热门,不过下面讨论的是一个不符合标准的document.all[]。DOM--DOCUMENT OBJECT MODEL文档对象模型,提供了访问文档对象的方法.例如文档中有一个table,你要改变它的背景颜色,那就可以在javascript中用document.all[]访问这个TABLE。但DOM也有所不同,因为浏览器厂商之间的竞争,各浏览器厂商都开发...
标签: Web开发
js用来区别IE与其他浏览器及IE6-8之间的方法。 1、document.all 2、!!window.ActiveXObject; 使用方法如下: if (document.all){ alert(IE浏览器); }else{ alert(非IE浏览器); } if (!!window.ActiveXObject){ alert(IE浏览器); }else{ alert(非IE浏览器); } 下面是区别IE6、IE7、IE8之间的方法: var isIE=!!window.ActiveXObject; v...

经验教程

804

收藏

38
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部