2009年9月27日星期日

IE6 绝对定位元素的 1px 间距 bug

IE6- 有一个非常讨厌的 bug,当绝对定位元素的父元素高或宽为奇数时,bottom 和 right 会获取错误。

HTML

<div class="outer height199">
 <p>This container has a height of 199px and width of 199px</p>
 <div class="inner">img</div>
 <div class="inner2">img</div>
</div>
<div class="outer height200">
 <p>This container has a height of 200px and width of 200px</p>
 <div class="inner">img</div>
 <div class="inner2">img</div>
</div>

CSS

.outer{
 width:200px;
 background:red;
 margin:10px;
 position:relative;
 float:left;
    display:inline;/* ie double margin fix*/
}
.height199{height:199px;width:199px;}
.height200{height:200px;width:200px}
.height201{height:201px;width:201px;}
.height202{height:202px;width:202px;}
.height203{height:203px;width:203px;}
.height204{height:204px;width:204px;}
.height205{height:205px;width:205px}

.inner,.inner2{
 width:30px;
 height:30px;
 position:absolute;
 background:blue;
}
.inner{
 bottom:0;
 left:0;
}
.inner2{
 top:0;
 right:0;

}
p{clear:both;margin:0 40px 1em 5px}

可以看出在奇数容器下出现了1px 间距,而在偶数容器下正常。

不完美的解决方法:改变结构并使用浮动

HTML

<div class="fix">
 <div class="outer height199">
  <div class="inner2">img</div>
  <p>This container has a height of 199px</p>
 </div>
 <div class="inner">img</div>
</div>
<div class="fix">
 <div class="outer height200">
  <div class="inner2">img</div>
  <p>This container has a height of 200px</p>
 </div>
 <div class="inner">img</div>
</div>

CSS

.fix {
 width:200px;
 margin:10px;
 position:relative;
 float:left;
    display:inline;/* ie double margin fix*/
}
.fix .outer{margin:0}
.fix .inner{
 clear:both;
 margin-top:-30px;
 position:relative;
 float:left;
}
.fix .inner2{float:right;position:static}

ytzong 简译自《IE6 1px gap on absolute elements

2009年9月24日星期四

[翻译]重(zhòng)载下的动态 UI 设计技巧

TechTarget 主办的 Ajax Experience 2009 大会9月14日至16日在波士顿举行,业内大牛纷纷向 Web2.0 世界发起挑战,探讨一些诸如用户体验、高性能与可维护性、架构等伟大主题,放出的 PPT 在此

下面是 Patrick Lightbody 分享的后半段总结翻译(前半段为演示):

为失败而设计

  • 不要忘记 AJAX 仍为网络应用
    • 网络会由于各种原因失败
    • 网络不可预知
  • 为 AJAX 请求意外添加 Hook
    • 为存储请求状态及重试而编码
  • 为失败而测试

谨慎对待 DOM

  • 非必要时不要改变 DOM 状态
    • Avoid aggressive “synchronization” common in some AJAX toolkits
  • 合并数据而非替换
    • 页面局部加载(div.innerHtml=...)也不是很好
    • 会带来更多工作,但是运行不畅时会有更好的体验

锁住 UI

  • 不要给用户机会去改变那些可能由你来改变的事情
    • 比如提交后禁用按钮
    • 如有必要,使用模拟的对话框来锁住整个 UI
  • 请记住:要有恢复措施!
    • 为失败而测试并确保发生意外时 UI 解锁

告知用户

  • 始终让用户知道正在发生什么
  • 当发生糟糕的错误时给他们一个完美的“逃生舱”
    • 为逃生舱设置入口
    • Gmail 是个很好的案例
  • 至少,有个简单的"loading"指示器
2009年9月23日星期三

最好的前端工作流程?

from Best front-end workflow within a production team?

2009年9月8日星期二

使用 background:url(#) 解决 IE6&7 bug

通过设置selector{background:url(#)}可以解决一些IE6&7 bug:

  1. 鼠标滚轮失效bugdemo。当时用的是添加背景色的方法:
    #works{background:#fff}

    也可通过下面方法解决:

    #works{background:url(#)}
  2. a 标签为了 png-24 图片透明而使用透明滤镜后导致 a 链接不可点击,demo
    a{background:none}

    解决方法(demo):

    a{background:url(#);/*或指向透明的gif*/}

    详见 No Transparency Click Bug

  3. a 局部点击bug,demo。 解决方法(demo):
    a{background:url(#)}

    或:

    a{background: #fff}

    详见:Partial Click Bug v2

延伸阅读:

2009年9月1日星期二

CssOptimizer1.0 发布

抽空将刚到公司时写的 CSS 压缩工具由 web 版移植为了离线版(这也是我的第一个 WinForm 程序),操作同 PngOptimizer(也许要翻墙) 类似,将要压缩的 CSS 文件拖拽至程序窗口即可,之后会生成压缩后的文件并建立副本。

压缩原理如下:

  1. 删除换行符
  2. 删除}前的分号
  3. 删除注释

最好配合 Microsoft Expression Web 使用:

  1. EW进行如下设置:进入工具菜单 - 网页编辑器选项 - 代码格式选项卡,将 CSS 下拉框中所有项的格式都设置为“行前:0”,“行后:0”,“空格后:0”
  2. 用 EW 编辑 CSS 时,右键“重设 CSS 格式”即可对代码进行格式化,之后保存
  3. 用本工具压缩

注:本程序只能在 Windows 下使用并须安装 .NET framework (EW 自带 3.0)

下载地址:http://www.brsbox.com/filebox/down/fc/922b69797c5cf1a062b7a2415594bd46,下载后解压到任意目录即可