相关标签

修复 jQuery 中 isFunction 方法的 BUG

jQuery 1.4 源码 449 行(core.js 431 行),判断是否为函数的方法如下(思路来源于 Douglas Crockford 的《The Miller Device》): isFunction: function( obj ) { return toString.call(obj) === “[object Function]”; }, 同时 jQuery 的作者也作了部分注释: See test/unit/core.js for details concerning isFunction. Since version 1.3, DOM methods and functions like alert aren’t supported. They return false on IE (#2968). 即:此方法在 IE 下无法正确识别 DOM 方法和一些函数(例如 alert […]

... 13 条评论 »

如何快速定位页面中复杂 CSS BUG 问题

相信大家对于常见 CSS BUG 的处理已经相对比较熟悉,例如:IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug 等等。但时常我们也会碰到复杂的 CSS BUG 问题,所谓“复杂”实质是指触发的条件很复杂,而“BUG” 也并非指一定是浏览器的 BUG 。对于此类问题,我们首先要解决的是如何定位到问题,只有快速的定位到问题,才能更好的解决问题。 对于快速定位,个人的经验处理一般如下(基本可以定位到我在 淘宝 遇到的 90% 以上的复杂 CSS BUG 问题): 1、检查页面的标签是否闭合 不要小看这条,也许折腾了你两天都没有解决的 CSS BUG 问题,却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的,而他们很容易犯此类问题。 快捷提示:可以用 Dreamweaver 打开文件检查,一般没有闭合的标签,会黄色背景高亮。 2、样式排除法 有些复杂的页面也许加载了 N 个... 39 条评论 »

按钮在 IE 中两边被拉伸的 BUG

大家在写按钮(input、button)的时候会发现在 IE 下: 随着字数的增多,两边的间距也会越来越大。 在 WIN 的XP 风格下,当字数很多时,两边还会出现严重的锯齿。 到底是什么原因呢? 蓝色理想 原 WEB标准化专栏 的斑竹 zbm2001z 给出了一个答案: 1、IE 在按钮的 value 值每增加 4 个字节(汉字为 2 个)时,就会在按钮的两边产生总共一个字节的内边距宽度。 2、IE 的按钮(XP 风格)默认样式是一个固定尺寸的圆角矩形图片作背景,所以一旦按钮变宽变高后,这个固定尺寸的圆角矩形图片的边缘自然就会出现“拉毛”的现象了。 对于第二个问题我们暂时没办法去解决,除非 WIN 系统自己修复 BUG ,但对于第一个问题 ,我们还是可以修复的。 IE 下给按钮元素设置 overflow 属性的 visible 值(注 :padding 值仅在设置了overflow:visible 属性后才有效),这个属性... 27 条评论 »

IE 下 href 的 BUG

在浏览器 IE6 、IE7、Firefox2+、Firefpx3+、Opera9.6+、Safari3.1+中测试以下代码(Demo): <div id=”test”> <a href=”#”> test </a> </div> <div id=”result”></div> <script type=”text/javascript”> (function(){ var test = document.getElementById(‘test’); alert(test.innerHTML); var result = document.getElementById(‘result’); result.innerHTML = test.innerHTML; alert(result.innerHTML) })(); </script> 结果会发现,在 IE6、IE7 浏览器中第二次弹出的 result.innerHTML 中的 A 元素的 href 值成为了绝对路径。 其实先人们早遇到这些问题(感谢 玉伯 提供的资料): 《getAttribute(“HREF”) is always absolute》 《getAttribute href bug》 在上面的文章中已提及了处理方案,就是在 IE 下使用 getAttribute( ‘href’ , […]

... 23 条评论 »

Firefox 下 innerHTML 的一个 BUG

今天同事 明城 在项目中碰到一个 BUG,代码具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Firefox下innerHTML的一个BUG</title> <style type="text/css"> a { display: block; border: 1px solid red;} div { display: inline; border: 1px solid red;} </style> </head> <body> <a href="javascript:change();">change<div id="count">20</div>aaa</a> <script type="text/javascript"> function change() { var count = document.getElementById(‘count’); var […]

... 18 条评论 »

z-index在IE中的迷惑(二)

IE中z-index BUG 首先先来看一个演示例子的代码部分。 XHTML 部分: <div id=”container”> <div id=”box1″>这个box应该在上面</div> </div> <div id=”box2″>这个box应该在下面,IE浏览器会对定位元素产生一个新的stacking context ,甚至当元素 z-index的为“auto”。</div> CSS 部分: #container { position: relative; } #box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 20; } #box2 { position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 10; […]

... 13 条评论 »

裁切BUG(Guillotine Bug)的触发条件

裁切 BUG(Guillotine Bug)现象:浮动元素内某些连接 hover 时,该元素的底部会被砍掉。 详细介绍:http://www.positioniseverything.net/explorer/guillotine.html 触发条件: 一个容器元素; 在容器内有一个没有被清楚浮动的浮动元素; 非浮动的内容在浮动元素之后,并且容器内包含链接; 那些链接的a:hover样式改变某些属性; 只出现在IE浏览器。

... 0 条评论»

IE中伪类:hover的使用及BUG

:hover 是我们在 CSS 设计中最常运用的伪类之一,许多绚丽效果的实现离不开伪类 :hover,比如我们常见的纯 CSS 菜单、相册效果等等。 或许用了这么久的伪类 :hover,还有部分朋友还不完全了解 hover 的规则: 在 CSS1 中此伪类仅可用于 a 对象。且对于无 href 属性(特性)的 a 对象,此伪类不发生作用。 在 CSS2 中此伪类可以应用于任何对象。 但目前 IE5.5、IE6 仅支持 CSS1 中的 :hover,不过新出的 IE7 是支持 CSS2 中的 :hover。 当我们用伪类 :hover 做某些特殊效果时,依据 CSS2 很好完成,但为了现在占据主流浏览器的 IE6 ,我们又不得不做很多工作,比如给添加a元素等来模拟完成最终的效果。 或许这样讲太空洞,请看下面一个常见的触发显示的例子(仅选择IE6为例讲解)。 我们先用 CSS2 的写法来实现: XHTML部分: <ul> <li>鼠标移过来触发我吧!<a h... 17 条评论 »

IE6下图片下方有空隙的解决方法

方法一:改变 html 的排版 例如: <div> <img src=”http://www.google.com/intl/en_ALL/images/logo.gif” alt=”google” /> </div> 改为: <div><img src=”http://www.google.com/intl/en_ALL/images/logo.gif” alt=”google” /></div> 方法二:设置 img 为 display:block 方法三:设置 vertical-align 属性为 top | bottom |middle |text-bottom

... 6 条评论 »

翻译:The Underscore Hack

下划线“_”在 CSS2.1 规范中是被承认的 CSS 标识。 浏览器会忽略未知的 CSS 属性。 MSIE5+(Windows)会忽略 CSS 属性名前的 “_”。 因此,这个 CSS 的分析是,例如: _color:red。首页, 正确的,对于 CSS2.1 规范来说是被允许的(即使软件验证,只支持 CSS2.0 老版本,说它是一个 Bug :他们是错误的,但它是正确的)。其次, 被任何浏览器忽略,除了 IE 。最后, 当颜色被处理:在 WinIE 中是红色。 如上,这就是所说的 IE 的 Bug ,特征是以简单明了的方式建立仅对 WinIE 有效的 CSS 属性(MacIE 没有这样的 Bug 和特征)。这样很容易调整,例如被错误执行的位置:在 WinIE 中被调整(见例子)。 #menu { position: fixed; _position: absolute; … } 同样的方法可以用来调整 min-height 的属性在 WinIE […]

... 1 条评论 »