{ Hauy`s blog } Inpeck.com

专注于用户体验、交互设计、web前端技术和web标准化建设。

有序列表(OL)在IE7下不能正常显示序号的bug

2008年10月31日 — 4 条评论 »

最近在工作中发现IE7在处理有序列表时有一个bug。

情况如下:

把ol中的li设置css属性overflow设置为hidden或者auto时,列表的序号将不能正常显示。如图所示:

同时,当list-style-type属性设置为lower-roman时,只显示罗马字母i,
同理,设为lower-alpha时,只显示小写字母a。

经过测试,其他浏览器均未发现此现象。
在网上搜索了一番,仍不知是何种原因导致这种情况出现,希望诸位指点。

另外,我在IE8里面测试了这个页面发现干脆连前面的序号也不显示了,
由于IE8现在还在测试期,所以不能肯定在将来还会有这个bug。
IE8下的表现应该是符合标准浏览器的解析方式。
即当list-style-position属性默认为outside时,序号就显示在li这个box之外了,
所以overflow设置为hidden时,序号自然就不显示了。

另外,IE7还有这个现象:

在正常情况下,list-style-position属性设置为inside时,序号能显示在li这个box之内。
但是当overflow设置为hidden时,即使将list-style-position属性设置为inside,序号仍然出现在li这个box之外,
此时,上述的bug也会发生。

测试页面地址请点击这里


Chrome及其他浏览器内存占用情况测试

2008年10月22日 — 5 条评论 »

Chrome出来已经有一段时间了,或褒或贬各执一词。
有个关键的争议点是:Chrome的多进程架构是否合理、能否提高系统运行效率?
于是我突然想做个简单的测试,比较一下各个浏览器的内存占用情况。

测试环境:

  • 系统:Windows Vista Ultimate 中文版,安装了SP1
  • CPU:Intel Core2 Duo T7250
  • 内存:DDR2 533 3G

测试软件(均为英文版):

  • Chrome 0.2.149.30
  • IE 7.00.6000.16386
  • Firefox 3.0.2(仅安装了少数常用插件,比如Firebug、Web Developer Toolbar等)
  • Opera 9.60
  • Safari 3.0.4(523.15) 

测试步骤:

  1. 每个浏览器只打开畅享网,记录其内存占用情况;
  2. 每个浏览器都打开六个网页,记录其内存占用情况,这六个网页分别是:畅享网首页、Google Reader、Google Docs、新浪首页、Adobe首页、淘宝首页;
  3. 关掉其他页面,只留下Google Reader,记录其内存占用情况。

继续阅读 »

分类: 工具

Adobe Photoshop CS4 新增及增强功能

2008年9月23日 — 1 条评论 »

Adobe的官方网站上已经放出了CS4系列新增功能的中文介绍。

关于Photoshop CS4,新增的功能有:

  • 创新的 3D 绘图与合成
  • 3D 对象和属性编辑
  • 新增调整面板(以前菜单里的那堆)
  • 新增了蒙版面板(Masks panel)
  • 流体画布旋转(可以随意旋转画布)
对原功能进行了加强的有:
  • 图像自动混合(似乎很神奇)
  • 更顺畅的遥摄和缩放(缩放、定位图像位置)
  • 内容感知型缩放(看上去很神奇)
  • 层自动对齐
  • 更远的景深(就是上面那个图像自动混合功能。。。)
  • 增强的动态图形编辑
  • 更好的原始图像处理(Camera Raw 5 插件)
等等
不知道什么时候可以在市面上看到?
详细内容可以查看这里:中文版 英文版
分类: 业界动态

Axure教程:用Axure模拟注册和登录的过程

2008年9月23日 — 6 条评论 »

通过Axure,我们可以做很多事情。
我们甚至可以建立起一套和真实网页几乎完全一致的页面原型

今天我要给大家介绍怎样通过Axure内置的变量来模拟注册和登录的过程。

Axure的变量功能相对还是比较简单的。
注册的过程,就是用组件中的值对变量进行赋值。 
登录的过程,就是把组件中的值和变量对照,如果相等,就可以登录,反之则不允许。

首先,我们要在菜单 Wireframe -> Manage Variables 项里设置好我们需要的变量:

设置变量

继续阅读 »

分类: 工具

教你关闭QQ空间

2008年7月18日 — 4 条评论 »

想关闭qq空间很久了,一直不知道怎么关,今天,经群里的铁马指点,终于知道怎么关掉qq空间了。

过程很简单,只要访问这个地址:http://imgcache.qq.com/qzone/web/load_login_2.htm

填一下个人资料、密码、验证码,然后做一个调查,就可以马上把qq空间关闭了。

只是关闭了qq空间以后,想要再重新开通的话,我还没找到什么办法。。。可能要联系客服?

分类: 其他

怎样通过Foxmail来发送完整的HTML网页文件

2008年7月8日 — 4 条评论 »

最近经常有朋友问到这个问题,我还是写一个详细的说明比较好。

由于Foxmail提供了一个模板的功能,这个功能我们可以用来发送HTML的网页文件。

找到Foxmail的安装目录,比如 D:\Program files\Tencent\Foxmail ,为了方便起见,我们可以把需要发送的网页文件复制到 D:\Program files\Tencent\Foxmail\Template\New 目录下。

此时在Foxmail里点击 “撰写 -> 自定义” 就能看到刚才放进去的网页,选中以后就可以直接发送这个文件了。

用Foxmail发送网页文档

需要注意的是两点:

  1. 网页的文件名需要htm结尾,不能以html结尾;
  2. 网页的编码需要采用GB2312,不能用UTF-8。修改方法如下:
    打开网页,点击右键看编码,如果是简体中文(GB2312),那就不用改了,如果是Unicode(UTF-8),那就需要修改,修改的时候用记事本打开网页文件,找到类似 content=”text/html; charset=utf-8; 的代码,把utf-8改为gb2312,然后另存为,编码选择ANSI,文件类型选所有就可以了,覆盖原来的网页文件。
分类: 工具

Adobe Dreamweaver CS4 Beta 发布

2008年5月28日 — 2 条评论 »

今天下载并试用了一下,发现变得很不一样了。略微有点不适应。

Adobe Dreamweaver CS4

界面截图:

Adobe Dreamweaver CS4 截图

新增的功能有:

Live View

内置了一个WebKit渲染引擎,用于以标准浏览器来预览网页文件的显示效果。
Live View边上还有一个按钮叫Live Code,激活以后能在Code View里面显示该网页在真实浏览器环境下的Source Code,比如SSI过来的文件都能直接显示其内容了。

Related Files (相关文件)

这个功能是在编辑窗口的顶部显示一系列和当前网页相关的一系列文件,比如css啦,js啦等等,点一下就能直接编辑这些文件了,不需要到文件堆里面去找了。

Code Navigator (代码导航)

这个功能还是比较有用的。
简单地说,按住Alt在页面上点击以后,DW会弹出一个小对话框,用来显示会影响当前所选内容的信息,比如定义某段文字的CSS,在上面一点就可以切换到修改对应CSS的地方,很方便。

CSS best practices

CSS 方面有很大的增强。

Code hinting for Ajax and JavaScript frameworks (Ajax和Javascript框架的语法提示)

增加了对jQuery、Prototype和Spry这些js框架的语法提示支持。

HTML data sets

这个我没啥兴趣,增加了Spry的一个Data Set功能。

Photoshop Smart Objects (Photoshop智能对象)

没什么特别的,就是把psd文件拖进dw的时候会弹出一个优化图片的对话框,优化完以后提示让你保存jpg或者gif,有改动的话以后可以继续优化,只要psd文件还在。

Subversion integration

增加了版本控制功能。

新界面

据说变得更加fast和smart。。。不过我没感觉到。。。

其他的变化

  1. 右上角增加了切换面板布局的按钮,可以在八种布局方式之间切换,还可以新建和保存布局模式;
  2. 设置文字的属性的时候会弹出设置样式的对话框;
  3. 增加了Split Code (分割代码)功能,可以在两个界面显示同一个文件的不同部分,有些时候特别方便,不用来回拖动滚动条了;
  4. 编辑窗口右下角增加的对文档编码类型的描述,比如是unicode还是gb2312;
  5. 属性面板有了很大的变化,少了很多东西;
  6. 把插件管理器单独在菜单上放一个按钮令我觉得很奇怪;

郁闷的是。。。开着DW CS4之后我的DW CS3打不开了。。。要关掉以后才能打开。

Firework CS4和 Soundbooth CS4我没有太大兴趣,就没有关注了。

相关信息:

Dreamweaver CS4 帮助文件:http://help.adobe.com/en_US/Dreamweaver/10.0_Using/
Dreamweaver CS4 在Adobe的主页:http://labs.adobe.com/technologies/dreamweavercs4/
安装文件下载:For WindowsFor Mac

分类: 业界动态

0字节的flv文件导致vista的explorer崩溃

2008年5月14日 — 发表评论 »

今天朋友让我帮忙下载一个flv的视频,于是我就去找来了ViDown。
结果一开始下载以后,vista的explorer就不停地崩溃。。。囧。。。
然后进安全模式。。。explorer依然不停地崩溃。。。
郁闷了,打开卡巴,把关键区域扫描了一遍,未发现病毒。
用任务管理器却可以进入其他目录包括控制面板等。
我到c盘下找到explorer.exe文件,发现并没有被修改。

这时我发现,我在资源管理器里一切换到桌面所在目录,资源管理器也会崩溃。
于是我注意到在桌面目录下有一个0字节的flv文件,遂进入cmd把它删了,问题解决。

原来我刚才使用ViDown的时候把下载目录设置在了桌面,
开始下载的时候ViDown就新建了一个0字节的flv文件
vista的explorer大概想去预览这个文件,于是就出错了。

问题解决,把下载目录设置到其他地方就可以了。
不知道vista下,其他0字节的视频文件会不会导致explorer崩溃?

Updated: 

经测试,是播放flv文件的解码器的问题,原先的解码器是FLV splitter (Gabest) [version 1.0.0.1],
更新到1.0.0.4版本以后就没问题了。

分类: 其他

Email页面代码书写建议及规范

2008年4月30日 — 5 条评论 »

前几天看到口碑网的朋友写了一篇《如何编写兼容各主流邮箱的HTML邮件》,很不错。
在这里,我也要把我的经验和大家分享一下。

众所周知,Email是一项最古老的互联网应用之一。
因此,不少邮件系统还是会采用一些比较古老的处理方式,导致前端方面很多新的技术、新的特性无法被支持。
而且各个邮箱系统以及客户端的差异,也会使email的最终呈现出现很大的偏差。

HTML细节

就目前来说,如果要做一个email页面,为了保证最大的兼容性,有以下几点需要注意:

对于纯文本邮件:

  1. 邮件标题不要超过18个字;
  2. 每行不要超过34个字。

对于HTML邮件:

  1. 邮件标题不要超过18个字;
  2. HTML代码和图片尽量不要超过50kb;
  3. 页面宽度推荐500px,最大不要超过600px;
  4. 避免使用边缘的、非主流的HTML技术;
  5. 不使用css来布局,应该使用表格来布局;
  6. 不使用外联的css样式,而使用font标签来定义样式,定义链接颜色时也是如此,写法如下: <font style="font-family:arial,helvetica; font-size:10pt; color:#000000">
    ...
    </font>
  7. 不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML ;
  8. body和meta之类的标签是可以无视的,因为在很多邮箱系统里它会被过滤;
  9. 如果整个邮件有用到背景色或背景图,建议用以下方式处理:<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr>
    <td width="100%" height="100%" bgcolor=".....">
    <!--- 邮件内容 -->
    </td>
    </tr>
    </table>
  10. 有背景图片的时候,我们要采用这种写法:<table background="background.gif" cellspacing="0" cellpadding="0">

继续阅读 »


google的Sitelinks可能会采用旧的索引?

2008年2月27日 — 1 条评论 »

最近我在做理财易网站的SEO优化,
在我改了网站的标题之后很长一段时间,直接搜索“理财易”的话,SERP页面中的网站标题一直没有变。

请看截图:

google上搜索理财易google上搜索在线记账

我猜想可能google的Sitelinks会采用旧的索引文件?
不知道其他朋友有没有注意这个现象。


搜索

输入关键词并按回车进行搜索
第三届 D2 前端技术论坛 (上海)

页面

文档


按月存档:

订阅

通过FeedBurner订阅
通过Feedsky订阅

链接


我的 Google Reader 分享

我的饭否

同步



程序提供:WordPress 主题设计:Dalarnas

{ Hauy`s blog } Inpeck.com © 2010 — 保留部分权利