Bug

A collection of 22 posts

Bug

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

  • ytzong
    ytzong
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

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

  • ytzong
    ytzong
Bug

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中(

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

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

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

  • ytzong
    ytzong
Bug

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

  • ytzong
    ytzong
Bug

使用 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。

  • ytzong
    ytzong
Bug

说说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<

  • ytzong
    ytzong
Bug

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文件夹中(

  • ytzong
    ytzong
Bug

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{

  • ytzong
    ytzong
Bug

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(

  • ytzong
    ytzong