IE6 下完美实现 position:fixed 效果(滚动不闪烁)

2012-09-18

近年来随着网站用户体验需求的急剧增加,网站中使用了更多能够方便用户浏览的效果。比如常见的“回到顶部”按钮,还有现在比较时兴的顶部导航,或页脚导航,固定在屏幕上。这些效果通过 CSS 的 position:fixed 是非常容易就可实现的。但是,非常可惜的是,这个属性在狗啃的 IE6 下是无效的。

之前我一般实用两种解决方案。一种是无视 IE6 直接去掉这个效果;另一种就是针对 IE6 把 position:fixed 换成 position:absolute,然后元素的位置通过 CSS 表达式来动态计算。代码如下:

1
2
3
4
5
6
7
8
9
10
11
#lift
{
	position: fixed;
	right: 50px;
	bottom: 50px;
 
	/* IE6 */
	_position: absolute;
	_bottom: auto;
	_top: expression((document.compatMode && document.compatMode == 'CSS1Compat' ? documentElement.scrollTop + (documentElement.clientHeight - this.clientHeight ) : document.body.scrollTop + (document.body.clientHeight - this.clientHeight)) - 50);
}

这个方法看似把问题解决了,但滚动的时候,#lift 元素会一直闪烁,或者说一直跳,有点卡顿的效果。看到京东等一些大网站也这个鸟样,我也一直没在意。直到这两天看到了 特爱博客 的一篇文章给出了解决方案,试了一下,效果非常完美。

首先请围观 DEMO 页面
代码与之前不同的是,给 html 加上了一个空白背景图,具体如下:

1
2
3
4
5
6
* html
{
	/* 专门为 IE6 写的,让浏览器在重绘界面的时候优先渲染 CSS,解决滚动的时候卡顿的问题 */
	_background-image: url(about:blank);
	_background-attachment: fixed;
}

一开始我还担心会和 body 的 background 发生冲突,但实际效果是我想多了。DEMO 页面我算是做得比较精致的,测试了 IE6/7/8/9、Safari、Chrome、360浏览器各种脑残渲染模式,都是完美的。但最终对 IE6 还是使用 CSS 表达式来对元素定位,据说执行效率非常低,加上 IE6 这个娃天生就不太健壮,如果大家有什么更好的方法(纯 CSS 不要 JavaScript)欢迎一起交流,一起学习!

毫无亮点:苹果 2012 秋季发布会

2012-09-13

吃早餐的时候,赶紧看了一下 cnbeta 昨晚的苹果 2012 秋季发布会直播报道。就像报道说的,这可能是几年来最受关注的一次发布会,六月份那次发布会,祭出了震撼业界的 Retina MacBook Pro(就是我现在正在码字的机器,喵),于是大家都猜测着今天苹果会为我们展示什么样的 iPhone 5,是否能继续乔布斯的步伐,带来领先业界的观念和产品。但结果,真的是令我失望。

关于工业设计:

iPhone 5 的外观虽然是变薄,变长,变轻了, 还用上了什么玻璃,但,但这真的算是亮点吗?变长的 iPhone 比例不如以前那么和谐了,而外观和 iPhone 4 / 4s 又是那么相似,真是一个壳用三年啊。变轻也不一定是好事,4s 的手感非常舒服,如果少了那份重量,是否会有玩具的感觉呢?变薄了,这个算是一个工业设计的进步吧,但手感如何呢?还有待评测了。如果以上都不算什么,那背后的设计真的是 HTC(后头丑)了!弱爆了哎。

阅读全文 »

SetResX:解除封印,开启 2880×1800 最高分辨率!

2012-09-09

话说自从入手了 Retina MacBook Pro 后,我一直以为显示器设置里面的“更多空间”就是最高的 2880×1800 分辨率,直到昨天晚上才发现,其实那个只是 1920×1200 而已,并没有达到传说中的 Retina 视网膜分辨率。据说目前仅有《暗黑破坏神3》可以达到这个分辨率。这样的话,这所谓的视网膜分辨率岂不是浪费了?花瓶?

其实不然,2880×1800 仅仅是被苹果封印起来而已,在显示器设置为“最适合 Retina 显示器”之后,系统会自动判断应用程序是否支持 2880×1800 分辨率,是的话才会自动开启。那怎样才能让系统本身就默认为 2880×1800 分辨率呢?百度 + Google 之后,终于找到了一个 APP 可以快速修改分辨率,解除苹果的封印,达到 2880×1800 极致分辨率。这个软件就是 SetResX。

打开 SetResX 之后便会在菜单栏上增加一个图标,在里面就可以非常方便快捷的选择分辨率了:

阅读全文 »

Mac Adobe CS6 完美破解激活(免替换文件/可更新)详细图文教程

2012-09-07

好久没弄这个博客,某天回来突然发现本文的访问量已经 150000 多了… 每天一两百次来看这个教程的…
既然人气这么高那总得做点什么…
博主的微博粉丝太少了,求关注啊!!有木有!!!

最近一直在折腾 Mac,就连在 Windows 下闭着眼就能安装的 Adobe 系列,都显得有些陌生。尤其是破解激活的过程。虽然也有 Windows 下最常见的 amtlib 替换法,但好友 Digidea 告诉我那样其实不太安全。于是索性混了几天各种论坛,学会了一种通过序列号和激活码来激活 Adobe CS6 系列的方式。下面就以在 Mac 下安装 Photoshop CS6 为例,把过程详细的写下来,以备后用。

准备工作:

1,各种安装包,不要大师版,而是独立安装包。最好是官方的,网上很多,搜一下;
2,准备独立安装包的序列号(cd-key),在文章最后我会提供;
3,下载 Adobe CS6 大师版注册机,等会用它来生成激活码(点击下载,含 Windows 版和 Mac 版);
4,如果是 Mac 下建议再准备一个方便修改 hosts 的工具“Hosts 1.1”(点击下载);
5,断网。

阅读全文 »

实拍 Retina MacBook Pro 开机速度

2012-09-05

好友狂狂问我,新笔记本开机速度如何。总觉得这个描述不好说,索性就录了个视频发上来。
先说一下系统的配置:第三代 i7 处理器(2.3GHz),16G 内存 ,256G 固态硬盘,大概就这样。
从开机到打开 Photoshop CS6 差不多才20秒。

通过快捷方式直接打开 VMware 中的系统

2012-09-03

俗话说“工欲善其事,必先利其器”。作为一个经常需要到 VMware 里面去测试原生 IE6 兼容性的苦逼前端开发,每次都要先打开 VMware 再选择要启动的虚拟系统,是一件非常繁琐的事情。于是就寻思着是否有什么方式,可以快速的,直接启动某个虚拟系统呢?果然在问过度娘之后,找到了方法。

方法一:直接运行虚拟机文件夹中的 .vmx 文件

其实这个方法是在写这篇文章的过程中无意发现的,之前在问度娘的时候,并没有看到有人提到这个方法。非常方便,直接把 .vmx 文件发送到桌面快捷方式,就可以实现快速启动了。
当然,这个方式对于绿色版的 VMware 是无效的,因为 .vmx 文件没有关联到 VMware 去。
阅读全文 »

终于收到了 Retina MacBook Pro

2012-09-01

我怀着无比淡定且激动,敲下了这个标题。
今天终于收到梁帅哥送给我的 Retina MacBook Pro 笔记本,特此写下在 Mac 上的第一篇日志。对 Mac 系统的键盘还不太熟悉,所以就先来纯粹的图片介绍吧!

极致简单的苹果风包装

阅读全文 »

给博客加了代码高亮插件:SyntaxHighlighter Evolved

2012-08-30

身为世界上大名鼎鼎的博客程序 WordPress 在默认形态下,竟然不支持向文章中插入代码段?这让我时不时想贴几行代码来炫耀一下的程序猿情何以堪。

试过了 pre 和 code 标签都不行之后,我咨询度娘了。 度娘很亲切的说,小朋友,写代码是没钱途的 难道你连 WP-SyntaxHighlighter 插件都不知道吗?是的,这是个熟悉的插件,曾经是必装的插件之一。可是今晚试了一下,发现它的主题有个问题,就是贴出来的代码总会出现竖向滚动条。要求美观的我当然不能接受,使用 Google Chrome 审核元素之后发现是 themes 文件的问题,就在我准备拿出手术刀 Dreamweaver 对 CSS 整容之前,我听到了度娘另一个幽幽的声音,她呼唤我:SyntaxHighlighter Evolved

从名字上看,这应该是一个对 WP-SyntaxHighlighter 插件进行完善或重制的版本,我眼前闪现出了希望的光芒,仿佛看到了我光明的未来。啊,能贴出美观的代码是多么幸福的事!

于是我马上把 WP-SyntaxHighlighter 禁用,删除。从后台安装了 SyntaxHighlighter Evolved 插件,然后进入 Settings 看看有什么默认选项。咦?简单明了,我喜欢。跟着我 add new post 测试了一下代码效果,我靠!完美!PERFECT!YO YO COME ON BABY GO!在你的心上 自由的飞翔……凌乱了…

总之,SyntaxHighlighter Evolved 是个好同志,喜欢贴代码的孩纸都可以试试。下面就让我随便贴几句展示效果吧~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#region ParseImage
private string ParseImage(string text)
{
    string result = text;
    result = Regex.Replace(result, @"(?<url>http://[^,]+\.(png|jpg|gif))(,(?<width>\d+))?(,(?<height>\d+))?(,(?<alt>\S+))?",
        "<img src=\"${url}\" width=\"${width}\" height=\"${height}\" alt=\"${alt}\" />",
        RegexOptions.Multiline | RegexOptions.IgnoreCase);
 
    result = result.Replace(" width=\"\"", "");
    result = result.Replace(" height=\"\"", "");
    result = result.Replace(" alt=\"\"", "");
 
    return result;
}
#endregion

来不及了来不及了……啊!

2012-08-27

自己写的 PHP + SQLite 博客程序,才活了一天,就被我误删了。
又花了一个星期,重新设计新版界面,换 ASP.NET + SQL Server 写程序,却没想到我的 Retina MacBook Pro 就快来了。

想到到时会有一段时间是在尝试 OS X 的系统,C# 开发还是比较麻烦的。于是索性我就暂停了新博客的开发工作,还上了久违了的 WordPress 程序。就像老师说的,不要重复发明轮子,何况 WordPress 这个轮子已经是很圆了。

以前毕竟也用了很久 WordPress,为了有点新鲜感,这次尝试了英文版的。加之隔了好几个大版本没用过,啊,好陌生?

标题好像很奇怪?
哈,其实是怕 Retina MacBook Pro 到手后没有地方给我发文炫耀,所以赶快弄架个程序上来算了。

期待我的新笔记本,当然梁帅哥说是送我今年的生日礼物的,提前了两个月整。
也期待十一国庆,会不会让我休息一下呢?