Webkit 内核浏览器 background-size 失效 bug

CssGaga 的 AutoRetina 生成的代码格式如下: @media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (-moz-min-device-pixel-ratio:1.5),only screen and (-o-min-device-pixel-ratio:3/2),only screen and »

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

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

iOS mobile safari bug

当sprite中的图片无间距时,在mobile safari(iPhone/iPad/iPod touch)中会出现如下情况 注意图标的边缘,把相邻的图也显示出来了 解决方法: 拼图时保留至少1px的间距 如果使用CssGaga 自动拼图的话升级后重新生成sprite即可 »

IE9 border bug

在MIX11来临之际给IE9提个bug 参看 IE6 BUG:边框不能设为透明,IE9中显示如下: 解决方法: 将dotted改为dashed body{background-color:yellow;} .pointer{width:0;height:0;border-top:100px transparent <strong>dashed</strong> »

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: »

IE 字体 bug

症状参见网页中英文混排行高不等问题的解决方案探讨,不过不太认同最后的观点。 做了个简单的demo <ul class="clearfix"> <li>QQ</li> <li>QQ农场</li> <li>腾讯朋友& »

IE font-family bug

三谈Web默认字体中有这么一段: GB 编码问题。font: 12px sans-serif; 不设置宋体,页面为 GB 系列编码时,非中文操作系统下(港台用户中有不少英文系统,还有海外华人),IE的默认字体是 Microsoft Sans Serif Regular, 很难看。截图为证: 有两个解决方案:a. 用”宋体”垫底;b. »

IE6/7下划线对不齐bug

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