Archive for 三月, 2009

谈谈微软IE8正式版

三月 22nd, 2009

为提高网民上网的更好的体验,微软与近日发布了IE8正式版本了。就新浏览器的兼容性问题,有个大公司的公关人员说出了很多人的心声了。“微软IE8连自己的网站都兼容不了,这说明中间还是有很多问题的。”……

1、IE8网页显示不正常用“兼容性视图”搞定。

“IE8不仅采用了国际通用的网页开发标准——W3C标准(World Wide Web Consortium即万维网联盟标准),并且为了兼容基于其它网页标准开发的网站,IE8还专门提供了“兼容性视图”功能。” 你就忽悠吧,反正用IE8打开的页面乱了,责任全是人家网站不够标准。连自家的首页都需要使用IE7兼容模式显示,真搞不懂这是为什么……

2、量身定做的meta标签。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"  />

记住这个伟大的发明吧。微软专利产品。强大的功能就是让网页能够在ie8中以ie7兼容模式,而目前是上至微软官网,下至平民博客,想不麻烦,那都得加。因为微软前段时间发布的与IE8不兼容网站清单中,几乎涵盖了你每天打开的所有网站,国内的就2400个,当然像我们这些平民博客它是没有统计的,全是QQ、淘宝、腾讯、新浪等等等等了。 发布了IE8正式版,而又高喊着让大家全去加这个可笑的标签。那和用IE7有啥区别呢?

3、不兼容网站列表内置。
IE8安装时,就将上述与IE8不兼容的网站清单塞进了用户的机器,当你打开浏览器访问网页时,只要是不兼容列表中的网站,IE8会自动以兼容模式运行。所以说要想去掉那个搞笑的“兼容模式”按钮,要不就向微软妥协,加段Meta标签,要不就像百度、Google不加标签人家也自动把你拉进落后分子名单……呵呵。

4、微软总是在用一个错误掩盖另一个错误。 这句至理名言不是我说的,呵呵。说出来之后微软有人回应道:“兼容IE8比较简单,只要符合W3C标准即可,但目前国内大部分网站都是兼容的IE6的标准,所以导致在IE8/FF/Chrome下面都会变形。”

5、微软自夸IE8性能超过Firefox和Chrome。

马上就有人跳出来反驳了。原来不是最快的,而是最慢的……

6、放心地装IE8吧,该来的都来了。

人家都叫“正式版”了,咱挡是挡不住的,有些朋友怕装了IE8之后看不到IE7的显示效果的可以放心了,点一下“兼容模式”按钮是是IE7效果了,还可以打开IE8的开发者工具来调试查看IE7/IE8的差异。这东西虽然赶不上Firebug,但个人感觉还是比以前的IE Developer Toolbar要先进一些的。

做前端的朋友们,浏览器兼容问题又增加了一个测试指标了……

疯狂的保安

三月 16th, 2009

以上内容,纯属调侃。呵呵。感谢作者Sofia

也谈网页圆角的背景图法

三月 14th, 2009

网页的圆角处理,其实最开始的九宫格的表格处理是挺方便的,只是现在都不用表格布局了,自然就被非法取缔了。呵呵。

微软的有VML画圆角,由于只是它自家的特产,大家也都不用了,再有就是Javascript的处理方法,很多都会影响页面性能,大家也都不爱用了。

剩下来的,就只能是老老实实地用背景图了。常用的方法有:

1、固定高度的情况下,我们通常把背景图的宽度拉到足够大,做一个大图,如下:

2、同样,固定宽度的话,我们就拉长高度,如下:

原理都是一样的,就是2头拼凑到一块形成整体。第二种方法会因为在实际使用中图片可能会拉太长,我们一般会将它分为3块来实现,即头部、中间(1px背景垂直拉伸)、和底边。

3、以上是一般网站局部使用圆角的常见处理方法,但如果是整站的UI都很圆的话,显然上面2个常见的方法就不是很好用了,到处都是圆角,高度宽度都随意变换的情况下。我们有必要来一个兼容性更好的背景图法了。这也必然把我们带到了最开始的“九宫格”模式中去了。

同样是基于这种“九宫格”处理的思想,在代码实现上各个网站也有各自的招。

1、头、尾各用3个标签(div or span)来实现圆角,中间直接用border-left、border-right属性来补2边。

2、用一个很大很大的圆角图片,然后来个若干层div嵌套实现,道理和最上面说的拉长高度和拉长宽度是一样的,它这个是双向无限拉长,比如Facebooke的这个圆角处理的背景图片是2000*16像素的尺寸。更大的我看到就是饭否的这张1000*1000像素的了。请看例子。

3、图太大了,总难免是有点舍不得用的,那就用小图,看淘宝网首页的,实现圆角的图片圆角就是这样的。它的原理是在标准的边框实现之后,再额外地向4个角加上一张小图片去补圆,它这个做法,除了图片是小的之外,在网页加载背景图之前,也是有一个比较好的视觉呈现的。示意图如下:

具体代码请看例子