A fix to the IE6 line-height/replaced element bug

2009.04.1709:16

一个经典 bug,见 PIE:http://www.positioniseverything.net/explorer/lineheightbug.html

大概描述一下:IE6 中,一个 replaced element 所在行的行高会有异常,具体就是 leading 似乎被吃掉了,如果连续多行都出现 replaced element,结果更糟糕,看起来就似乎 line-height 根本不起作用。PIE 那个页面没有给出 fix,刚捣腾出来一个。

具体就是,如果在 replaced element 所在行有一个 hasLayout 的 non-replaced inline 元素,此问题即可解决。可以看一下直接修改自 PIE 那个 bug demofix Demo1 (view with IE6)。

当然,如果给每个 replaced 元素手动加这个 fix,有点不靠谱,于是我又想起了 expression(当然是 without performance issue 的版本),哇哈哈……结果就有了这么一个较为简单的 fix:Demo2 (view with IE6)。

代码如下,自行变通:

* html input,* html img{
  zoom: expression(function(ele){
      ele.style.zoom = "1";
      var iefixer = document.createElement("b");
      iefixer.className="rlfix";
      ele.parentNode.insertBefore(iefixer,ele);
    }(this));
  }
.rlfix{zoom: 1;}

以上。

CSS Expression Reloaded

2008.10.2621:17

CSS Expression,动态 CSS 属性,IE 私有,自 5.0 开始引入(IE8 将不再支持),参考 MSDN

这东西的优点:

  • 使 CSS 属性动态生成,所以基本 js 能干的它都能干
  • 使用 CSS 选择符,比 js 遍历到某个特定元素要方便得多

这东西的缺点:

  • expression 会反复执行,有严重的效率问题。它的触发似乎不是通过事件,而是通过 interval 一类的机制。
  • 别的浏览器不支持,IE8 也将不再支持

那现在翻出来干嘛呢?因为我发现,第一个缺点是可以解决的。方法就是,在 expression 语句体里面,将触发该 expression 的 css 属性重置。比如 body{ zoom: expression(function(ele){ele.style.zoom = "1"; alert("xx");}(this));},执行这段 CSS 会发现,alert 只跑了一次。具体可以看我上一个关于解决背景闪烁问题的帖子

所以,解决了 expression 的效率问题,就完全可以在实战中用上了。使用时只要用一个无关紧要的 CSS 属性做触发,比如 zoom, 比如 letter-spacing,比如 unicode-bidi,等等等等,触发完了重置回默认值。可以玩的很多,我来写几个实际应用中经常会遇到的问题:

给不同 type 的 input 赋予不同的样式

支持 CSS2 选择符的可以使用属性选择符,IE 则可以用 expression 给 input 加上不同 type 对应的 class:(这个例子在经典贴过

input{
  zoom: expression(function(ele){
    ele.style.zoom = "1";
    (ele.className)?ele.className+=" "+ele.type:ele.className=ele.type;
  }(this));
}
input[type="text"]{ border: 1px solid red;}
input.text{border: 1px solid red;}
input[type="button"]{ border: 1px solid blue;}
input.button{border: 1px solid blue;}

演示 1,这个还可以再发散发散,比如加上 :checked,:disabled 等等,改表单样式不愁啦~

隔行换色(zebra lists)

支持 CSS3 选择符的可以直接上 nth-child(webkit,opera 都支持,马上要发布的 firefox3.1 也支持),IE 则可以通过 expression 加上 odd 或 even 的 class:

.test{
  unicode-bidi: expression(function(ele){
    ele.style.unicodeBidi = "normal";
    var childs = ele.getElementsByTagName("li");
    for(var i=0; i<childs.length; i++){
      (i % 2)?childs[i].className+=" even":childs[i].className+=" odd";
    }
  }(this));
}
.test li.odd{background: #CCC;}
.test li.even{background: #EEE;}
	
.test li:nth-child(odd){
  background: #CCC;
}
.test li:nth-child(even){
  background: #EEE;
}

演示 2 (IE5+,Opera,Safari,Chrome,Firefox 3.1)

模拟 :before 或者 :after

Firefox 3.1 之后,:before 或者 :after 出来的东西可控的 CSS 属性更多了,比如 position/float,又有的玩了,不像以前基本废柴,只拿来清除浮动……大材小用啊。

.test{
  letter-spacing: expression(function(ele){
    ele.style.letterSpacing = "0";
    var newchild = document.createElement("span");
    newchild.className="after";
    newchild.appendChild(document.createTextNode(" World!"));
    ele.appendChild(newchild);
  }(this));
}
.test:after{
  content: " World!";
  color: red;
}
.test .after{color: red;}

演示 3

还有什么好玩的可以玩?想起来再来补充。

IE8 的 CSS 支持情况

2008.08.2810:50

blog 你好,好久不见。

IE8 beta 2 来了,关注一下 CSS 相关的情况,以下整理自 What’s New in Internet Explorer 8 [MSDN]

  • display 支持 table 那一坨东西,外加 inline-block, inline-table, run-in。
  • 支持 Data URI,可以搞那些 base64 的小图标。
  • 支持生成内容,就是那些 :after, :before, content, counter,quotes 一类。
  • 支持 outline
  • 支持若干打印相关的东东
  • 支持 :lang 和 :focus 伪类

更详细的这里有张表:CSS Compatibility and Internet Explorer [MSDN]

除了上面列的那些,个人比较喜欢的还包括:

  • 支持 CSS3 那一堆高级选择符了,很好很好。
  • 支持 box-sizing,实用啊实用,这下可以随心所欲地捣腾而不用再受 W3C 那变态的旧盒模型折磨了

比较失望的包括:

  • 不支持 CSS3 新增的伪类,:nth-child() 啦,:first-of-type 啦,:not 啦,多好的东东。
  • 不支持多重背景
  • 不支持 border-radius,哇靠!不支持多重背景就算了,border-radius 也不给玩,做圆角还是要累死啊

另外一个信息,由于 Firefox 2 开始自动推送 3 的更新,所以现在做东西基本可以不考虑 Firefox 2 了。一个重要的变化就是,现在可以放心大胆地玩 inline-block 了,哇哈哈哈。

再说 IE6 的背景闪烁

2008.01.0409:42

基本上 google 一下 IE6 flicker,第一页基本全是说这个问题,解决方法就是那个神奇的 document.execCommand("BackgroundImageCache",false,true),只不过是围绕着用 CSS expression 还是 JavaScript 的问题。JavsScript 最稳妥,不过有时候 JavaScript 未必方便改,而 CSS 虽然方便但是 expression 会反复执行,有严重的效率问题。最近的几个项目用的方法是这样的,在 expression 中把 CSS 中用来触发的属性重写一下:

body{
    zoom: expression(function(ele){
    document.execCommand('BackgroundImageCache', false, true);
    ele.style.zoom = '1';
    }(this));
}

这里用 zoom 触发,搞定之后把 zoom 写回 1(好像我很喜欢捣腾 zoom),这下就没效率问题了吧,嘿嘿。同理,其他针对 IE 的 hack,如果是只跑一次的 expression,其实都可以这样做,所谓兔死狗烹过河拆桥是也~ :D。

开始转到 ps cs3 了

2007.12.2609:50
[ Design ]

自从 10.0.1 之后,CS3 效率问题不大了(果然 Adobe 的东西要等到 SP1 才能凑合用啊,这是哪位大牛说的来着?)于是开始着手向它过渡,毕竟看宣传,诱人的功能还是蛮多的,要与时俱进哇。

经过一段时间的使用,总得来说还是不错的,不过不爽也是会有滴,列个表记录一下。
这个列表随着慢慢磨合应该会不断改动,因为有可能有些爽的会发现越来越不爽,也可能不爽的后来找到了解决办法,嘿嘿。噢对了,我是从 CS 向 CS3 过渡,没碰过 CS2,可能有的地方大惊小怪了。

先来比较爽的:

  • smart object,这个的确不错,小用了一把,体验很流畅。
  • 图层可多选了,意味着操作可以批量了。
  • Transform 里面多了一个 warp,大赞……
  • 更多亮点发掘中…

然后是不爽的:

  • 颜色的16进制值居然默认变成小写了,虽然没有大碍,不过对于在 CSS 里一向用大写的“轻度代码洁癖症”患者来说,还真是不舒畅啊……另外也搞不明白 Adobe 为啥去动这个设置,我实在看不出这个地方改成小写会带来什么好处……谁教我怎么改回大写~
  • 图层效果原来可以直接拖动复制到其他层,现在拖动却成了移动……同样,不理解为什么 Adobe 要这么改。那个,谁教我要复制应该怎么来操作捏?现在是开始用从来不用的 style 面板了……更新,经 Uranus 点拨,原来要拖动之前按住 Alt 键,帮助要多看,嗯。
  • 系统设置的 Type 里面多了个 Enable Missing Glyph Protection,这个千万要钩上啊,不然中英文混排的时候问题就来了,给一段文字设置英文字体的时候,中文都变成 XXOO 了,哇靠。我这边不知道是默认的还是自己调过,反正给取消了,郁闷了好一阵子。
  • 更多烦恼积累中…

话说好久没写了

2007.12.2521:09

论文是艰苦滴,毕业是怀念滴,工作是顺利滴……
上班是清闲滴,杂事是繁多滴,压力是很大滴……
领证是激动滴,装修是省心滴,婚礼是筹备滴……
教室是改造滴,合唱是失败滴,校庆是明年滴……
道路是拓宽滴,高架是快通滴,空气是污染滴……
书记是换岗滴,房价是疯涨滴,社会是和谐滴……
Fx3 是快来滴,IE8 是有才滴,Opera 是勇敢滴……
标准是深入人心滴,Flash 是依然坚挺滴,Web 还是 2.0滴……

coreldraw 报 msxml4 错误

2007.09.0417:37

访问 http://support.corel.com/ 搜索 DOM Document

Essentially you need to re-register msxml4.dll, see below:

  • Click on Start -> Run
  • Enter: regsvr32 /u msxml4.dll (this command line de-registers MSXML4.DLL)
  • Now enter: regsvr32 msxml4.dll (DLL is re-registered)
  • You should now be able to run CorelDRAW

works

本 blog 被 GFW 无情地屏蔽鸟

2007.06.1512:40

这样的日子不知何时是个尽头。
update:
feeds 丢给 feedburner 了,还好这个没被封。新地址:http://feeds.feedburner.com/blogsome/old9

AI CS3 保存文件时出错

2007.05.2515:40

Adobe Illustrator CS3 保存文件或和其他应用程序交互时(比如在 Flash CS3 中导入、和 PS 之间复制粘贴等等),频频报错,而且是那种惊天地泣鬼神的无法挽回数据的错误信息只有外星人才能看懂的“非法操作”……我恨啊!想想辛辛苦苦画了半天的图,结果一保存,当!挂了,如果是你,你骂街不?出这种错肯定想到版本问题,或者设置问题,结果换了几个版本来恶心了我一下午,都没搞定。于是上网找,居然是 Adobe 自己的问题!在 Adobe Forums 上找到原因,原来需要启动 Print Spooler 服务…… orz ……由于我机器没打印机也极少用这服务,都是设为手动的,所以普通状况下都关着——你说这破原因让人上哪猜去?你要是遇到问题搞不定,倒是跟我说一声啊,提示我某某服务要启动不成么?你到好,直接自焚!我跟你说亏得你没脸,有脸我肯定大耳刮子抽你!

结果把服务启动,所有问题解决,so cheap

P.S. 因祸得福,由于下狠心换装了 Web Premium,顺便把 AI 激活了,嗯,懒得等 keygen 了,是不是套装 keygen 都出来了大家都没激情做单个的了?另外提醒一下,装套装之前要记得把以前的那些单独装的东西卸载干净,特别是用 VLK 激活的,要删 C:\Program Files\Common Files\Adobe\Adobe PCD\cache\cache.db,否则你就装了卸卸了装吧,想想 CS3 安装卸载时候那匪夷所思的速度,有你受的。

用图片自定义复选框

2007.05.1910:40

自定义复选框样式,推荐经典标准化专栏 snwebsite 版主的一篇帖子 《用图片模拟checkbox,简简单单》。

真是创意无限啊,想法真妙。