Bug - 99css

Google Fonts 中文字体在 Safari 中的显示 Bug

Nginx 反向代理 Google Fonts 以便国内访问 Ghost 博客系统的默认皮肤使用了 Google Fonts，由于被墙，所以采用了 Nginx 反向代理的方法来让国内访问，fons.99css.com.conf 配置如下： upstream google { server fonts.googleapis.com:80; } upstream gstatic { server fonts.gstatic.com:80; } server { listen 80; server_name fonts.99css.com; valid_referers server_name

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 (min-device-pixel-ratio:1.5){ .sp-qzone{background-image:url(sprite/[email protected]);background-position:-99px 0;background-size:164px 32px} } 在 rMBP

解决 -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

iOS mobile safari bug

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

IE6 absolute 元素宽度被撑开 bug

症状当绝对定位元素的子元素被触发hasLayout时，该元素宽度会撑满整个窗口 <div class="absolute"> <div class="inner"> <p>IE bug</p> </div> </div> .absolute{position:absolute;left:100px;top:100px;border:1px black solid;padding:5px

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>;border-right:200px red solid;font-size:0;}

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中并没有单行截断，显示如下：而IE6 & 7及其他高级浏览器正常几番尝试，发现是这里的影响 body{word-wrap:break-word;} 解决方法是将其置为默认值normal，加上这句

IE 字体 bug

症状参见网页中英文混排行高不等问题的解决方案探讨，不过不太认同最后的观点。做了个简单的demo <ul class="clearfix"> <li>QQ</li> <li>QQ农场</li> <li>腾讯朋友</li> </ul> yui reset body{font-size:12px;font-family:Tahoma} li{float:left;

IE font-family bug

三谈Web默认字体中有这么一段： GB 编码问题。font: 12px sans-serif; 不设置宋体，页面为 GB 系列编码时，非中文操作系统下（港台用户中有不少英文系统，还有海外华人），IE的默认字体是 Microsoft Sans Serif Regular, 很难看。截图为证：有两个解决方案：a. 用”宋体”垫底；b. 不加 sans-serif. ——- 2013-7-31 补充 ——- 由于上面图片失效，补一个出现同样问题的图片 ——- 2013-7-31 补充结束 ——- 在Qzone简版个人中心（同事做的）也遇到过类似的问题，不过不局限于以上条件，详情如下：出现在简体中文旗舰版Win7的IE8中（

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 to the IE6 line-height/replaced element bug》，不过在某些追求精确到像素的情况下还是用PIE的方法《Microsoft Internet Explorer

用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:normal;} 同时我也尝试了《Layout of repeating blocks》提到的word-spacing，不过仅Firefox/IE8有效，而在Chrome/Safari中无效

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外的部分能显示多少就显示多少，不出现横向滚动条，大于1024的分辨率则大图全部显示。下面来看个简单的demo（为了方便发现及总结问题，外围大图宽400px（对应上面的1280px），中间200px掏空（对应上面的980px），中间图宽200px）： <!DOCTYPE

IE 6&7 z-index bug

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

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&

使用 background:url(#) 解决 IE bug

通过设置selector{background:url(#)}可以解决一些IE6&7 bug： 1.鼠标滚轮失效bug，demo。当时用的是添加背景色的方法： #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。

标准模式中的 IE 6&7 width 100% bug

在 web app 项目中经常遇到这个 bug，国外称之为100% ≠ 100% bug，又分为两种： 1. div 的宽度 100% ≠ 100% (IE 6&7) 需求：标准模式 container 局部滚动 asie 固定宽度 content 自适应宽度再复杂一点还会要求两列等高，可参考 /40 HTML <div id="container"> <div id="wrapper">

IE 6/7 鼠标滚轮失效Bug

前言：万恶的IE总是带给我们“惊喜”，比如滚轮失效。解决方法：你可以尝试用以下方法解决：去除以下代码（IE7下遇到过一次） html{overflow-x:hidden;} 在滚动区域加上如下代码（IE6下遇过一次） selcetor{background-color:white;} 延伸阅读： Internet Explorer bug: Broken mouse wheel scrolling Demo

说说display:inline-block

前言： Firefox 3发布后，我开始肆无忌惮的使用inline-blcok… 基本用法： inline元素的inline-block： span{displsy:inline-blcok;} block元素的inline-block： div{displsy:inline-blcok;#displsy:inline;#zoom:1;} 开头的为针对IE6/7的hack，多数人用*，用*的话我使用的格式化工具会出错。遇到的几个问题： **代码格式化对间距的影响：**HTML： <ul> <li class="current">1</li> <li>2<

Firefox 3 Bug：Iframe页面被带入Quirks Mode

前言：在B/S系统中经常用到iframe，iframe中的数据用表格填充。 BUG: 标准模式时： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 进入iframe页面时th及td的字体不继承body的样式（偶尔出现）。分析：用firebug查看某一单元格（先在选项中选中显示浏览器默认样式），如下图：其中style.css是我写的CSS，quirk.css为firefox在Quirks Mode时的默认样式，位于安装目录下的res文件夹中（

IE6 BUG：边框不能设为透明

前言：有时候我们需要用纯CSS来写小三角，如下图：代码： HTML： <div class="pointer"></div> CSS： body{background-color:yellow;} .pointer{width:0;height:0;border-top:100px transparent solid;border-right:200px red solid;font-size:0;} 为了方便看效果，特意放大问题：正常显示效果： IE6下却遭遇BUG（不透明）：解决方法：将实线改为虚线，代码： body{

IE 6/7 BUG：下拉框select设宽度时option超出显示不全

问题如下图：解决思路：当鼠标移到select元素时将其宽度置为auto；鼠标移开时恢复为原定宽度。代码（基于jQuery）： $(function() { $(".ProductAttributesSelect") .mouseover(function(){ $(this) .data("origWidth", $(this).css("width")) .css("width", "auto"); }) .mouseout(function(){ $(this).css("width", $(this).data("origWidth")); }); }); 英文雅虎的注册页面有DEMO，童鞋们可以去围观下，O(

IE 6/7 Bug: 在fieldset中隐藏legend所引发的bug

HTML： <fieldset> <legend>登陆</legend> <ul> <li><label>账号：</label><input type="text" /></li> <li><label>密码：</label>