备忘 – IE6的十大Bug Fix

2009年3月10日 1 条评论

IE6的十个bug的Fix方案,看到一篇文章整理了一下,顺便转过来备忘一下。
原文链接 http://www.sitepoint.com/blogs/2009/03/06/10-fixes-for-ie6-problems/

1. 强制浏览器是用Web标准解析

HTML的写法

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd">

或者XHTML的写法

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2. Set Position: relative

给元素指定Position: relative能够解决很多奇怪的问题,比如对齐和显示不正确等。对于Position的属性要小心设置,特别是设为absolute。

3. 给Float的元素加上inline属性避免双倍margin

这大概是最著名的一个bug了,IE6下对于浮动元素,会莫名其妙的双倍空白边,解决的方法也很莫名,设上display:inline属性就好了,对于float元素这个属性本身没有任何意义。

4. 给特定元素加上hasLayout属性

很多IE6(甚至是IE7)的问题可以通过设置hasLayout这个ie only的内部属性来解决,比如让a这样的行级元素变成块级元素或者让元素应用透明效果。但这个属性并不能直接设置。最简单的让元素拥有hasLayout属性的方法是显式的为其设置高度或者宽度。有的时候,你不能显示的为其设定高度,可以使用设置高度为1%,而其父元素如果没有确定的高度时,该设置不会被应用到实际的高度上,但是hasLayout会被激活。

5. Fix字符重复bug

这是IE6上面一个非常奇怪的BUG,他的触发条件也是相当诡异,在浮动元素间如果有
<!– comment –> <!– comment –> <!– comment –>
这样的普通的HTML注释的话,会导致Float元素中的最后的字符会很诡异的出现在后面的clear元素中,具体的介绍大家可以看这里 positioniseverything

解决的方法也很奇怪
* 将所有的浮动元素设为 display:inline;
* 给最后的浮动元素设置 margin-right:-3px;
* 使用条件注释避免IE6下的问题 <!–[if !IE]>Put your commentary in here…<![endif]–>
* 在最后的容器内放入一个空的div (这种添加这种无语义的workaround并不是最理想的选择)

6. 需要悬浮效果的地方,尽量使用<a>标签

IE6中只能对<a>应用css hover效果,所以尽可能使用<a>标签来获取最大的兼容性。

7. 使用!important或者高级选择器来兼容IE6

使用!important和高级选择器来兼容IE6,可以避免使用那些通不过校验的非常规hack,比如所谓的_width这样的东西。我们来看个简单的例子。

1
2
3
4
5
#element {
	min-height: 20em;
	height: auto !important; /* understood by all browsers */
	height: 20em; /* IE6 incorrectly uses this value /*
}

IE6是不能正确解读!important这个修饰符的,所以他会错误的使用height:20em这个属性来实现最小高度。(IE6下容器会自动扩展)

1
2
3
4
5
6
7
8
9
#element {
	min-height: 20em;
	height: 20em;
}
 
/* ignored by IE6 */
#element[id] {
	 height: auto;
}

或者使用高级选择器,同样也能实现该目的,这样代码既能保持合法性,也能很好的去兼容IE6这个诡异的产品。

8. 避免在IE6下使用百分比尺寸

1
2
3
4
body {
	margin: 2% 0 !important;
	margin: 20px 0; /* IE6 only */
}

在IE6下是用百分比的尺寸是件非常让人头疼的事情,尽可能避免这样的使用,而是采用结合!important和精确尺寸来明确元素的大小。

9. 频繁测试,尽早测试

和其他编程一样,现在编程提倡持续测试,尽早测试,甚至可以测试驱动,在CSS开发过程中也要尽可能的频繁测试,可以参看我之前介绍的一些测试工具。 ==> 七个能够帮助你进行网页浏览器兼容性测试的工具

10. 重构你的代码

越磨砺,越光芒。。。。。

分类: 绾青丝 - WebDesign 标签: , ,

雨神眷顾的早春三月 – 三月壁纸推荐

2009年3月2日 2 条评论

最近上海貌似被雨神特别眷顾了,淅淅沥沥的小雨下个不停,山谷里的小溪哗啦啦啦流个不停。今天还被小偷光顾了一下,手机跟我说拜拜了。

换张墙纸换换心情吧。

三月壁纸

三月壁纸

四叶草的三月

三月壁纸2

三月壁纸2

雪线上的山脊

三月壁纸3

三月壁纸3

撕开春天的包装带

三月壁纸4

三月壁纸4

喝一杯吧

三月壁纸 - 白色情人节

三月壁纸 - 白色情人节

不是很明白的白色情人节

================================

喜欢壁纸的话,更多的下载请移步: http://www.smashingmagazine.com/2009/02/27/desktop-wallpaper-calendar-march-2009/

七个能够帮助你进行网页浏览器兼容性测试的工具

2009年2月26日 3 条评论

从最初的Netscape,到IE的崛起,独霸江湖,再到火狐出世,群雄并起,逐鹿中原,这些让人或激动,或失望的浏览器就像是网页设计领域的一朵朵乌云。最近做了一个网页,在兼容性上就遇到了新问题,不同平台下的字体兼容问题,特别是一些比较特殊的设计,比如使用了较为狭长的字体,可能会带来不少麻烦啊。

最完美的做法当然是能够在不同的环境下都测试一下,除了无敌的Vmware大法之外,今天再介绍一些很不错的工具给大家:

1 Xenocode Browser Sandbox

其实差不多就是提供了许多stand-alone的浏览器程序,提供几乎完全真实的测试环境,而且是相互独立的程序,不过下载的那个执行程序大了一点,还不如我一溜自己全装全了,有时候看看自己机器上那一堆浏览器也挺头大的。

2 CrossBrowserTesting.com

这个类似Citrix,免费的帐号有5分钟的体验时间,通过JavaApplet登陆到远程环境中去,有不同的平台供你选择,不过要讲究的是眼明手快,要不你就得不停开马甲了,感觉5分钟有点苛刻了,提供个30分钟的话比较慈善一点,不过既然大家都是出来混的,为了盈利无可厚非。

3 IETester

这个应该是很多朋友机器上的老朋友了,非常好用的IE测试器,能够提供非常完整的测试环境,效果也相当好,而且也没什么功能限制,免费的。真是砍妖杀怪的必备良器。

4 BrowsrCamp

在国内Mac的保有量可能还不足以引起客户的重视,但是对于国外的客户来说,Mac平台是相当重要的一块受众。这个网站的截图生成的相当快速,几乎就是新立得的效果,不过免费用户只能享用一点点功能,不过感觉还是挺有用的。

5 Litmus

应该说是相当好用也相当强大的在线工具,可惜收费用户和免费用户差别太大 了,有兴趣的同学去看看吧。

阅读全文…

云端之城 – Bespin 在线HTML编辑器

2009年2月16日 1 条评论

Bespin,星战中一个天空之城 ,这个星球上的人都生活在云端。 – Star Wars

Mozilla实验室最近推出了一款在线HTML编辑器也叫Bespin,一直以来,创建HTML文件,编辑,预览与同事协作似乎都是只能在桌面完成,那能不能将编辑器带上云端呢?答案是能,Bespin带你实现这一目标。

Bespin - 云端的HTML编辑器

Bespin - 云端的HTML编辑器

如果你是一位网页开发工作者,都应该去试用一下,感觉还真的不错,非常程序员风格的界面,类似Vi的命令行模式,IE不支持,用了Canvas,(不过我貌似没有找到新建文件的命令,但是看截图上确实有的),今天又看到一个类似的Rendur,不过一比要差了不少。

个人感觉Bespin最大的强处还是在于在线协作,开放的Plugin接口。和FireFox最吸引人的地方一样,拥有开放接口的应用,总会因为其自身的出色之处引来许多优秀插件助阵,未来可以期待。不过希望能够在中文等国际化方面有出色的表现。

同样,这种不限场所,不限环境的在线编辑器在某些场合还是有很大的价值,网页设计师很多都是Freelancer,相信这些特点还是很吸引他们的。

===========

我还有个想法,如果做成RIA应用是不是效果会更好,毕竟这样能在用户体验上更上一层楼,不过会不会不再像Cloud那样轻盈,两难啊。

===========

期待您的回复!

WebQQ开放测试中

2009年2月10日 6 条评论

去年开始,WebQQ的消息一直不断,先是会员QQ邮箱里的WebQQ开始上线,然后过渡到所有用户的邮箱WebQQ,一看就是对应Gmail+Gtalk的组合,可能是我的臆测,很多人看到这个说法多少要表现出一丝不屑。

腾讯历来的“拿来主义”的确也上不了台面,对于优秀的Idea,硬不照着做也不是个成功企业家该有的态度,写文章是一回事,带起整个集团又是一回事。

今年经过两轮的WebQQ封闭测试,终于开始向所有用户开放测试了,效果只能用一个词形容 – “完美

我们先看图:
webqq

基本囊括了除截图,语音视频等富媒体功能外所有的QQ功能,特别是对群的完整支持,太棒了,作为一款生活软件,我觉得在目前的情况下,QQ和MSN Gtalk最大的区别是,后者都是IM聊天通讯软件,而QQ是生活软件,(昨晚的那个不能说的新闻也是QQ第一时间告诉我的)堪称里程碑式的一次更新。 http://im.qq.com/webqq/

写这篇文章并不是作为一个IT从业人员的视角来写的,只是作为一个普通用户,我已经很少为一个软件新功能感到震撼了。有点意思,还在用QQ的同学们去试试看吧,毕竟不少公司对QQ视若猛兽的,比如我那个非常幼稚的公司,号称无视这个无视那个的幼稚公司就是这样。

======================

追加些内容

1、Ctrl+Alt+C,关闭聊天对话框
2、Ctrl+Q,提取新消息
3、Ctrl+左箭头,向左移动聊天窗口
4、Ctrl+右箭头,向右移动聊天窗口

分类: 补天宗 - 玩转系统 标签: ,

GreaseFire 一点巧思让出色的作品变成神器

2009年2月2日 1 条评论

GreaseMonkey作为Firefox上非常著名的一个插件,相信对于做IT的人来说是非常熟悉的了。比如给Gmail重新排个版,比如给开心网来个停车外挂,再比如我用的最多的天涯免费只看楼主插件,不用付费也能享受天涯助手。真的是非常酷的一个插件。还记得当初沉迷于Travian的时候,这个外挂不可谓不强大,而且说实话算不得作弊。

不过平时到真的很少去找些新脚本,一来上网习惯渐渐固定,二来也懒得每次去网站上看看了。不过好在孤陋寡闻的我偶然看到了GreaseFire这个小东西。一个站在巨人肩膀上的小巧思,自动帮你查找当前页面有没有对应的scripts供下载,并且按照网站上的Rank排序,并且还方便的可以预览该script信息。一下子让本来就非常出色的Monkey一下子变成了神器,现在每上一个新网站都习惯性看看有没有scripts供选择了。Cool!!

这里大家有没有发现,一个出色的产品如果在用户亲和度上多花一点巧思,立刻就能再次获得飞跃。GreaseMonkey内置这个功能完全没有问题,最好在加上安全风险评估机制,以免一些恶意scripts侵害用户。但是可能在插件的设计初期只是完成一个平台,是技术和代码的平台,并没有把用户也involve进来,也提醒自己以后策划产品时多考虑一下怎样让用户能够更快更轻易的使用产品,融入产品,并且与产品互动。