Bug

解决 -webkit-filter: grayscale(100%) 在 retina 下的模糊问题

劳民伤财的网站变灰又来了,随着 webkit 的普及,很多网站都使用了 -webkit-filter: grayscale(100%); 来使 webkit 浏览器变灰,但这会存在标题所述的问题,怎么解决呢? 很简单,在使用上述代码的位置加上这句 -webkit-transform: translateZ(0); 当然,你也可以使用CssGaga的一键变灰功能 延伸阅读: 页面变灰二三事 Quick Tip: Fix CSS Filters Creating Blurry Images on Retina

Bug

IE8 & 9 white-space nowrap 失效

项目中把IE8&9带入IE7模式的其中一个原因即为此。今天看到微博上有些争论,于是静下心来重新审视这个问题,demo: 咋截不断呐,不应该呀?有木有!!! ``` yui reset ... body{font-size:12px;font-family:Tahoma;word-wrap:break-word;} .ellipsis{width:5em;overflow:hidden;white-space:nowrap;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;} ``` IE8 & 9中并没有单行截断,

Bug

IE6/7下划线对不齐bug

这篇帖子《关于IE下英文字体跟中文字体不能对齐的根源以及解决办法》说的已经很详细了,不过不止中英文混合才会出现这个bug,比如《Internet Explorer: Broken Underlines》。 解决方法一般有以下几种: 对下划线元素使用宋体,缺点是宋体的英文数字比较难看,我个人也比较鄙视这种做法 触发下划线元素的hasLayout,缺点是inline元素会变成inline-block元素,折行时会整块掉下来 使下划线元素浮动,缺点是inline元素变成block元素,而且还要清除浮动 去除下划线元素相邻元素(相邻元素的子元素或父元素等等)的vertical-align(或重写为baseline),垂直居中用position:relative结合top来实现 在使用inline-block元素做sprite容器时经常会遇到这个问题,2、4是比较好的方案,记得要分清楚使用场合哦~ 当然IE6下还会出现行高失效bug,old9给出了一种方法《A fix

Bug

用display:inline-block做产品列表

由于D2的关系看到这篇文章《[纯技]产品列表到底应该怎么做?》,评论发不成功,又恰逢最近频繁遇到类似的项目,总结如下: 传统的实现方式是用float来实现,换一种思路用display:inline-block,比如这篇《Cross-Browser Inline-Block》(中文翻译)。在Firefox/Safari/Chrome/IE8中会遇到《说说display:inline-block》提到的第一个空隙问题,不过现在已经有了解决方法(详见《Firefox Bug: inline/inline-block的间隙》的评论并略作改进): ul{letter-spacing:-.25em} li{letter-spacing:

Bug

Sub-Pixel Bug?!

jQuery之父John Resig写过一篇《Sub-Pixel Problems in CSS》,一个50px宽的div中有4个float的div,每个宽25%,然而各个浏览器对50*25%的理解有些纠结(demo): 随后Steven Wittens的《CSS Sub-pixel Background Misalignments》,测试了固定宽度的元素水平居中时父元素背景图片居中的差异,更让我们看到眼花(demo): 让人郁闷的是:不止IE,各浏览器的不同版本也有些许差异… 还好,现实工作中很少会碰到这种情形(某些像我这种一个月都做此类页面的人除外),遇到了也只是一个相对简单的情形,比较典型的应用场景是:某些活动类的页面,背景一幅很宽大宏伟的1280px大图居中,中间区域980px居中,1024分辨率下980px外的部分能显示多少就显示多少,

Bug

IE 6&7 z-index bug

很老的 bug了,详细描述看下面几篇文章吧: position:relative/absolute无法冲破的等级 对《无法冲破的等级》一文的补充 补遗《无法冲破的等级》 文中给出的方法简单明了,不过有时页面比较复杂,只有通过用JS遍历 position:relative 元素并改变其 z-index 值来解决了。有了 JS 框架则更加简单。《Fixing IE z-index》分别给出了 jQuery 和 MooTools 版本,下面是 jQuery 版本的代码: