liunian / compatibility-detector Goto Github PK
View Code? Open in Web Editor NEWAutomatically exported from code.google.com/p/compatibility-detector
License: Apache License 2.0
Automatically exported from code.google.com/p/compatibility-detector
License: Apache License 2.0
第一次测试:有误报 (极少)
-------------------------[漏报]
漏报:设置了颜色样式的 FONT 标签(无论是 HTML attribute 还是
CSS property)出现在非 A 的元素内的情况未被检测,如:
<p style="font:32px Arial; text-decoration:underline; color:silver;">
Text in P
<font color="blue">Text in FONT</font>
</p>
测试用例:
font-color-affects-decoration.html
-------------------------[误报]
如果是以 CSS property 的 ‘color’ 而不是 HTML attribute 的
‘color’ 修饰的
FONT标签,那么在所有浏览器的标准模式中的表现完全一致,�
��异仅在混杂模式 (Q) 下的 Chrome 和 Safari。如:
<font style="color:red;">text in FONT</font>
如果当前页面不是混杂模式 (Q) 则不应该报告此问题。
测试用例:
font-color-affects-decoration-standards-mode.html
URL:
暂未发现。
---------------------------------------------------------------------------
第二次测试:误报 0% (0/20)
注:Chrome 9 dev
中不管处于何种渲染模式,显示情况已经统一为RCA描述中
Safari
(Q)时,情况,本次测试问题数量将以各浏览器现有渲染情况��
�准。
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 8:49
Attachments:
------------------------------[误报]
父元素宽度为
'shrink-to-fit',子孙级元素的宽度是百分比,但其最终宽度在��
�浏览器中相同的情况被报错。
原因是上述“父元素”的容器的宽度与上述“父元素”的子��
�级元素设置的宽度(或者这些元素设置的宽度加上上述“父�
��素”的 padding,又或者加上这些元素的 margin 等)一致。
简化来说,这些元素的 width + padding + margin
刚好等于上述“父元素”的容器的 content box
的宽度,即这个百分比宽度的元素,在 Chrome
下即便将其宽度更改为 ‘auto’ 其最终的宽度也不会变。
测试用例:
shrink_to_fit_percentage_child_just_fit.html
URL:
http://auto.sohu.com/
http://detail.zol.com.cn/cell_phone/index207959.shtml
http://www.sohu.com/
------------------------------[误报]
父元素宽度为
'shrink-to-fit',子孙级元素的宽度是百分比,但其在 IE7(S)
中宽度为 0
不可见,其他浏览器中由于无内容、无背景也不可见。
测试用例:
shrink_to_fit_percentage_child_invisible.html
URL:
http://finance.ifeng.com/
------------------------------[漏报]
父元素宽度为
'shrink-to-fit',子元素宽度不是百分比,但孙元素宽度为百分��
�时,仍有此问题,但并未报告。
测试用例:
shrink_to_fit_percentage_child_child.html
------------------------------[漏报]
父元素宽度为除浮动元素外的 'shrink-to-fit' 时(inline-block
或宽度为 ‘auto’ 并且 ‘left’ 和 ‘top’ 至少有一个为
‘auto’),子孙级元素的宽度是百分比时,仍有此问题。
测试用例:
shrink_to_fit_percentage_child.html
------------------------------[误报]
shrink_to_fit_percentage_child_detector.js 中判断父元素的宽度是否是
‘shrink-to-fit’ 时有问题,使用
chrome_comp.isShrinkToFit(context.getParentBlock(), true);
得到的不一定是父元素的。
测试样例:
get_wrong_parent_element.html
URL:
http://about.skype.com/
http://biz.yahoo.com/ne.html
http://cars.ebay.com.au/
http://developer.android.com/guide/basics/what-is-android.html
http://en.wikipedia.org/wiki/3G
http://ema.mtv.co.uk/
http://zone.msn.com/en-us/home
http://group.barclays.com/Home
http://maps.google.com.my/
http://moodle.org/
http://us.blackberry.com/smartphones/blackberrybold/
------------------------------[误报]
当宽度为百分比的子元素设置了 ‘white-space:nowrap’ 且
‘overflow:visible’时,各浏览器需要使用 ‘shrink-to-fit’
计算宽度的父元素宽度一致。
测试样例:
percentage_child_nowrap.html
URL:
http://www.ca.com/us/default.aspx
------------------------------[误报]
由于 chrome_comp.getDefinedStylePropertyByName 方法的跨域限制导致
chrome_comp.isShrinkToFit 方法不准确,错误的认为 width
为百分比的元素的包含块宽度需要使用 shrink-to-fit 计算。
URL:
http://itunes.apple.com/au/app/facebook/id284882215?mt=8
Original issue reported on code.google.com by [email protected]
on 15 Nov 2010 at 9:58
Attachments:
第一轮测试:准确(但无视觉差异)
有些溢出的情况,虽然溢出了,但实际上没有视觉差异:
http://blog.cntv.cn/blog/
http://blog.tianya.cn/
http://cartoon.tudou.com/
...
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 9:50
第一轮测试:有误报(90%)
---------------------------[误报] #1
当一个 CENTER 元素设置了 ‘margin:auto’
时,各浏览器中该元素都会居中对齐。
测试用例:
center_with_margin_auto.html
URL:
http://image.baidu.com/
---------------------------[误报] #2
当一个 CENTER 元素的父元素设置了
‘padding’,并且该父元素的 content box 尺寸与 CENTER
尺寸相同时,各浏览器中该元素的位置一样。
测试用例:
center_parent_has_padding_or_boder.html.html
URL:
http://junshi.blog.china.com/
http://mail.cn.yahoo.com/logout/logout1s.html
http://mobile.zol.com.cn/manu_297.shtml
http://sports.sina.com.cn/
http://sports.tom.com/
http://tieba.baidu.com/
http://www.4399.com/flash/13265.htm
http://www.hao123.com/ss/fy.htm
http://xiazai.zol.com.cn/
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 9:28
Attachments:
第一轮测试:有误报(91.7% [11/12])
---------------------------[误报] #1
当对 TABLE 元素设置 ‘border-spacing’ 特性而不是
‘cellspacing’ 时,会报错。由于 IE6 IE7 IE8(Q) 中存在 RX1008
的问题,又这三类浏览器不支持 ‘border-spacing’
特性(RE1020),因此在 ‘border-collapse:collapse’
时,各浏览器无差异。各浏览器都有默认 2px 的 cellspacing。
测试样例:
only_set_border_spacing.html
URL:
http://123.sogou.com/
http://anime.xunlei.com/
http://blog.sina.com.cn/
http://ditu.google.cn/
http://ent.sina.com.cn/
http://hd.gougou.com/
http://tw.stock.yahoo.com/
http://www.2345.com/indexz.htm
http://www.chinanews.com.cn/
http://www.google.cn/music/homepage
http://xy2.163.com/
---------------------------[误报] #2
设置了 ‘border-collapse:collapse’ 的空
TABLE(无子元素),浏览器间无差异,都不显示 TABLE。
测试样例:
empty_TABLE.html
URL:
http://anime.xunlei.com/
---------------------------[误报] #3
设置了 ‘cellspacing’ 属性的 TABLE 的父元素不可见(visibility
: hidden 或 display : none),各浏览器间无差异,都不显示 TABLE。
测试样例:
invisible_parent_of_TABLE.html
URL:
http://auto.sohu.com/
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 8:46
Attachments:
new
Original issue reported on code.google.com by [email protected]
on 25 Nov 2010 at 8:05
第一轮测试:
报告准确,但在给出的 URL 中看不出视觉差异。
URL:
http://tieba.baidu.com/
http://list.image.baidu.com/t/image_category/image_women_stars1.html
------------------------------------------------------------
第二轮测试:准确 (0/15)
报告依然准确,但所有测试的 URL 中均看不出视觉差异。
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 2:34
------------------------------[误报]
有些站点有意使用
<script type="text/vbscript">...</script>
来检查兼容性,或调用仅 IE 支持的方法,或为 IE
提供一个方法。
测试用例:
暂无
URL:
http://ent.youku.com/
http://mail.tom.com/
http://news.sina.com.cn/
http://sports.163.com/
------------------------------[误报]
有些站点有意使用
<script type="text/html">...</script>
存放页面的模版部分,利用 SCRIPT 的 ‘display:none’
特性不予显示,利用所有浏览器都不支持 ‘type=text/html’
来避免直接执行,并在需要的时候使用其他正常的脚本对这��
�模版块进行后续处理。
测试用例:
暂无
URL:
http://qzone.qq.com/
http://v2010bmw.qq.com/grab.html
------------------------------[漏报]
如果有这种写法
<script type="constructor">document.write(100);</script>
将不能被检查出来。
(type.toLowerCase() in ACCEPTED_SCRIPT_TYPES)
(ACCEPTED_SCRIPT_TYPES.hasOwnProperty(type.toLowerCase())
测试用例:
暂无
Original issue reported on code.google.com by sundongguo
on 15 Nov 2010 at 9:18
------------------------------[误报]
如果页面内的脚本尝试判断一个 document 对象是否有 ‘all’
属性时,会导致遍历的同时报错。作者可能并未使用
document.all.xxx 来获取元素。
测试用例:
document_all.html
URL:
http://auto.qq.com/
http://finance.sina.com.cn/
http://mail.163.com/
...
------------------------------[误报]
作者使用 typeof document.all!="undefined" 作为判断 IE 和 非 IE
浏览器的判断条件,会有误报。
测试用例:
typeOf_document_all.html
URL:
http://abcnews.go.com/WN/
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 2:19
Attachments:
第一轮测试:有误报(100%)
原文已做大量修改,现为:各浏览器中当 'overflow-x' 和
'overflow-y' 一个值为 'hidden' 另一个值为 'visible'
时的组合渲染结果存在差异
---------------------------[误报] #1
当容器的 ‘overflow-x’ 或 ‘overflow-y’ 值为 ‘scroll’ 或
‘auto’,另一个特性指定值为 ‘visible’
时,视觉效果上不存在兼容性问题。
只有当一个元素的 'overflow-x' 或 'overflow-y' 指定值为
'hidden',另一个特性的指定值为 'visible' 时,
该元素最终渲染使用的 'overflow-y' 或 'overflow-x' 值不同。IE6
IE7 IE8 使用 'hidden',其它浏览器使用 'auto'。
测试用例:
get_overflow-y_by_overflow-x.html
---------------------------[误报] #2
对 HTML BODY 的 overflow-x 或 overflow-y 指定值为 ‘visible’
时,它们的计算值总为
‘auto’,不受另一个特性的指定值影响。
测试用例:
HTML_overflow-x_overflow-y.html
BODY_overflow-x_overflow-y.html
URL:
http://bbs.city.tianya.cn/tianyacity/articleslist/0/41.shtml
http://detail.zol.com.cn/cell_phone_index/subcate57_297_list_1.html
http://detail.zol.com.cn/cell_phone_index/subcate57_list_1.html
http://detail.zol.com.cn/notebook_index/subcate16_list_1.html
http://www.tianya.cn/publicforum/articleslist/0/develop.shtml
http://www.tianya.cn/publicforum/articleslist/0/worldlook.shtml
http://www.tianya.cn/publicforum/articleslist/0/funinfo.shtml
http://www.tianya.cn/publicforum/articleslist/0/free.shtml
http://www.tianya.cn/publicforum/articleslist/0/feeling.shtml
---------------------------[误报] #3
存在以下两种情况:
1、容器的 width 为 0,子元素的 width 不为 0,设置了
‘overflow-y:hidden’, ‘overflow-x : visible’
2、容器的 height 为 0,子元素的 height 不为 0,设置了
‘overflow-x:hidden’, ‘overflow-y : visible’
容器 width 或 height 为 0 且子元素 width 或 height 不为 0
时容器的 scrollWidth 或 scrollHeight 大于 offsetWidth(0) 或
offsetHeight(0),应忽略宽高为0的情况。
这种情况可能由于 “RD1002: IE6 IE7(Q) IE8(Q) 中 'width' 或 'height'
的设定值在不足以容纳其内容时将被撑大”
的问题导致差异。
测试用例:
element_width_height_0.html
URL:
http://www.cmbchina.com/
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 8:41
Attachments:
第一轮测试:有误报(极少)
---------------------------[误报] #1
在样式表中使用后代选择符+类选择符设定的单元格样式,在�
��内容撑大单元格时检测有误。
测试用例:
stretched-cell-align-css.html
URL:
检查出来的 URL
中不存在以上现象。均非误报,但因为一般相差 10
像素以内,很难看出差别。
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 9:38
Attachments:
new
Original issue reported on code.google.com by [email protected]
on 25 Nov 2010 at 8:27
new
Original issue reported on code.google.com by [email protected]
on 25 Nov 2010 at 8:23
第一轮测试:准确
---------------------------[用法有问题,没有实际视觉影响] #1
1、文字宽度不足以溢出包含块或文本溢出了渲染的省略号 IE
和 Chrome 中位置不同(差异较小)
2、应用 ‘text-overflow : ellipsis’ 的元素中无文本元素,比如
OBJECT 或元素 ‘display : none’
测试样例:
text-overflow_ellipsis_with_no_text.html
URL:
http://military.china.com/
---------------------------[可能存在的用法有问题,有视觉影响] #1
Chrome 中当应用 ‘text-overflow : ellipsis’
的元素中包含块元素的时候,其内溢出的内联文本不会以省��
�号(三个点)表示,而 IE 则无影响,仍会显示省略号。
测试样例:
block_element_inside.html
------------------------------------------------------------
第二轮测试:有误报(50% [2/4])
---------------------------[误报] #1
在标准模式下,当同时应用 ‘text-overflow : ellipsis’ 和
‘overflow : hidden;’
的元素中包含块元素的时候,若块元素内的文本超出该元素��
�所有浏览器都会裁切掉超出部分,不会出现省略号,没有兼�
��性问题,误报。
测试样例:
both_text-overflow_and_overflow.html
URL:
http://books.google.com/
---------------------------[误报] #2
应用 ‘text-overflow : ellipsis’ 和 ‘overflow : hidden;’
的元素中文本未超出该元素,所有浏览器都都兼容,误报。
测试样例:
no_ellipsis.html
URL:
http://allrecipes.com/
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 9:16
Attachments:
第一轮测试:有误报(31.6% [6/19])
---------------------------[误报] #1
若父元素为设置了 ‘text-decoration : none’ 的 A
元素,则各浏览器表现一致。
测试样例:
A_with_text-decoration_none.html
URL:
http://fund.eastmoney.com/
http://mil.news.sina.com.cn/
http://my.paipai.com/hongbao.shtml
http://stock.eastmoney.com/newstock.html
http://video.sina.com.cn/
http://www.yahoo.com
---------------------------[用法有问题,没有实际视觉影响] #1
若元素为设置了 ‘text-decoration : none’ 的不可见元素(如 BR
或 ‘display : none’ 的内联元素)、空元素或应用
‘text-decoration’ 无效的元素(如 IMG
HR)时各浏览器表现一致。
测试样例:
invisible_or_text-decoration_no_affect_element.html
URL:
http://blog.tianya.cn/
http://mil.news.sina.com.cn/
---------------------------[用法有问题,没有实际视觉影响] #2
Chrome 中由于 A 标签作用于其内 ‘text-decoration : none’
的子元素的 ‘text-decoration : underline’
被子元素背景遮盖,导致 Chrome 和 IE 中表现一致。
(新问题 RT3014:各浏览器中元素的 background
会影响父元素渲染在自身的 text-decoration
效果,暂定标题,待细研究)
测试样例:
background_cover_underline.html
URL:
http://fund.eastmoney.com/favor.html
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 8:58
Attachments:
第一轮测试:准确
目前没发现问题。
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 9:23
------------------------------[误报]
对于 SCRIPT 标签,IE 和 Opera 有 ‘onreadystate’
事件,在装载结束后,readyState 分别为 ‘complete’ 和
‘loaded’,其他浏览器无 onreadystate 事件,但除 IE 外都支持
‘onload’
事件。如果给以上两个事件同时绑定一个可以兼容各浏览器��
�函数,将出现误报。
测试用例:
onreadystatechange_load_script.html + test.js
URL:
http://astro.sina.com.cn/
http://auto.qq.com/
http://bbs.city.tianya.cn/tianyacity/articleslist/0/41.shtml
http://blog.sina.com.cn/
http://cartoon.tudou.com/
http://dc.pconline.com.cn/
http://detail.zol.com.cn/cell_phone/index207959.shtml
http://expo2010.ifeng.com/
http://guba.eastmoney.com/topic,600030.html
http://military.china.com/
http://mobile.pconline.com.cn/
http://money.163.com/stock/
http://nba.tom.com/video/
http://news.sohu.com/
http://www.hao123.com/
http://www.tianya.cn/publicforum/articleslist/0/develop.shtml
http://www.xunlei.com/
--------------------------------------------------------------------------------
--
http://3dpregnancy.parentsconnect.com/
http://abcnews.go.com/
http://blog.seattlepi.com/seattlepolitics/archives/226993.asp?from=blog_last3
http://blogs.sacbee.com/capitolalertlatest/2010/11/youth-vote-not-there-for-mari
j.html
http://bossip.com/
------------------------------[误报]
(待讨论)对于 IFRAME、IMG 等元素,如果把 ‘onreadystate’ 和
‘onload’ 都以 attribute
的形式写入并在脚本中做处理,虽然脚本能正常运行,但也��
�报错。
测试用例:
onreadystatechange_element.html + test.jpg
URL:
http://bj.58.com/
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 2:27
Attachments:
第一轮测试:有误报 (分析多个 URL 暂未发现但不应该是极少)
---------------------------[误报] #1
当一个元素的包含块被浮动元素占据了部分空间时,由于
WebKit 的 margin 计算值的问题导致判断失误。
测试用例:
img-text-decoration-block.html
---------------------------[误报] #2
当一个元素设置了相对定位时判断有失误。关于此问题请参��
� RD1002 “问题分析”部分的“注2.1 和 2.2”。
测试用例:
overflow-relative.html
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 9:48
Attachments:
第一次测试,误报极少:
------------------------------[误报]
当 IFRAME / OBJECT 元素的 ‘display’ 为非 ‘inline’
‘inline-block’ ‘inline-table’
时,末尾跟随的空白字符仍会被忽略。
测试用例:
white_space_after_iframe_not_inline.html
URL:
暂未发现。
------------------------------
第二次测试,基本消除误报:
第一次测试的误报用例已经不产生误报了。
Original issue reported on code.google.com by [email protected]
on 15 Nov 2010 at 11:06
Attachments:
第一轮测试:有误报 (90%)
---------------------------[误报] #1
触发 Quirks Mode 的页面的 BODY 上设置 'text-align:center/right'
,并且 BODY 内有 normal flow 的、宽度占满 BODY
的元素时会报错。实际看不出错误效果。
原因是 BODY 的 clientWidth 在 Quirks Mode
里是视口(除去滚动条)的宽度,而不像 Standards Mode 里是
BODY 元素的 padding edge 的宽度。
因此使用
var childMaxWidth = node.clientWidth - parseInt(style.paddingLeft) -
parseInt(style.paddingRight); 时,当 node 是 Quirks Mode 下的 BODY
元素时,默认情况下得到的结果将比预期的值要大,这个值��
�加上了 BODY 的 margin 后的值。
测试用例:
text-align-on-body-quirks.html
URL:
http://www.sogou.com/
---------------------------[误报] #2
当一个元素初始状态为 display:none 时,如果里边包含了有负
margin 的元素,将导致判断出错。
测试用例:
text-align-invisible-and-negative-margin.html
URL:
http://finance.sina.com.cn/
http://cartoon.tudou.com/ 等 .tudou.com 共 16 个。
---------------------------[误报] #3
浮动元素占据了设置了 text-align:center 的元素的 content
area,导致判断出错。
测试用例:
text-align-with-floats.html
URL:
http://www.china.com/zh_cn/
---------------------------[漏报] #1
绝对、固定定位元素如果没有指定坐标,在 IE6 IE7 IE8(Q)
中也将受 text-align 的影响。但 IE6 IE7(Q) IE8(Q)
不支持固定定位。
测试用例:
text-align-with-postioned-element.html
---------------------------[漏报] #2
设置了宽度的元素判定失效,原因是即便元素 child 的
'margin-right' 的设定值是 auto,使用 child.getComputedStyle.marginRight
获得到的计算值也会有一个具体值而不是 0。这点与 Firefox
的处理(Firefox 得到的是 0)不一致。
因此使用
var childWidth = child.offsetWidth + parseInt(childStyle.marginLeft) +
parseInt(childStyle.marginRight); 得到的 childWidth
不是预期的结果,而是其包含块的宽度。
测试用例:
text-align-with-sized-element.html
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 9:32
Attachments:
------------------------------[误报](待讨论)
set/getAttribute
对于有映射关系的属性,多数时候的操作都可以在 IE
和其他浏览器中通用,因为用户多半只是为了实现效果,而��
�强调值的数据类型。
但在判断值的数据类型时,在不同的判断方法里则不一定通��
�。
测试用例:
get_and_set_attribute_has_binding.html
URL:
http://auto.qq.com/
...
------------------------------[漏报]
对于一些 IE only 的属性名,Chrome 不支持,但没有报出错误。
如 className(即 class属性) htmlFor(即 for 属性)。
测试用例:
get_and_set_attribute_ie_only.html
------------------------------[误报]
1.class和className 同时被setAttribute时,不会有兼容性问题-->误报
测试用例:
both_set_className_class.html
URL:
http://boutiques.orange.fr/
http://dailydeals.target.com/
http://emedicine.medscape.com/
2.页面引入prototype.js库,会有误报。
prototype.js代码:
var PROPERTIES_ATTRIBUTES_MAP = (function(){
var el = document.createElement('div'),
isBuggy = false,
propName = '_countedByPrototype',
value = 'x'
el[propName] = value;
isBuggy = (el.getAttribute(propName) === value);
el = null;
return isBuggy;
})();
URL:
http://dc.sbnation.com/2010/9/6/1673532/boise-st-virginia-tech-miracle-catch
http://cookpad.com/
http://condescargadirecta.com/
http://beritasemasa.com/
http://ecodiario.eleconomista.es/sociedad/noticias/2420858/09/10/Deberia-dimitir
-Jesus-Neira-de-su-cargo-publico.html
http://es.netlog.com/
http://es.privalia.com/public
http://fr.cam4.com/
http://www.ikea.com/de/
http://interactivo.eluniversal.com.mx/external/podcast/n_podcast.html
http://justlia.mtv.uol.com.br/
http://kb2.adobe.com/cps/000/6b3af6c9.html
http://menoob.com/iphone/how-to-recover-your-iphone-files-photos-contacts-notes-
sms-call-history-etc/
http://my.mail.ru/community/mailruturkish/journal
http://net.sapo.pt/
http://newyork.mbfashionweek.com/
-----------------------------------------------------
http://blog.linkedin.com/
http://www.alexistexas.com/
http://bossip.com/
http://hackulo.us/forums/
Original issue reported on code.google.com by sundongguo
on 15 Nov 2010 at 9:12
第一轮测试:有误报 (60%)
---------------------------[误报] #1
无明显差异的部分报错。
测试用例:
full_shape_space_no_wrap_with_margin.html
URL:
http://www.qq.com/
http://tongren.qidian.com/
http://stock.sohu.com/
...
---------------------------[漏报] #1
尾部有全角空格的内容在 Chrome 中换行,但没有报错。
测试用例:
full_shape_space_no_wrap.html
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 10:00
Attachments:
第一次测试:
----------------------------[误报]
(待讨论)如果空单元格设置了 empty-cells:hide 的话,Chrome
也将隐藏边框及背景色。但 IE6 IE7 IE8(Q)
不支持该属性,因此仅不显示边框,背景色仍能显示。
测试用例:
empty_cell_none.html
URL:
暂未发现
漏报:单元格内包含空元素,在不同情况下 IE6 IE7 IE8(Q)
的表现可能不同。
测试用例:
empty_cell_has_empey_elements.html
------------------------------------------
第二次测试:
页面url数据测试中已基本消除误报 0% (0/30)
第一次测试中用例 empty_cell_none.html 已经修复误报
但 empty_cell_has_empey_elements.html 依然漏报。
Original issue reported on code.google.com by [email protected]
on 15 Nov 2010 at 11:16
第一轮测试:有误报(100%)
---------------------------[误报] #1
有以下几种情况:
1、多出的空格后无视觉上紧邻的可视元素(即使有紧邻的可�
��元素,如果只多出有限的空格的话,在视觉上也很难看出差
异,并且很多时候这不会影响布局;如果多个中间有空格的��
�藏内联元素前后都有可视元素,则非 IE
浏览器不会忽略这些空格,而是合并他们为一个空格。待讨��
�。);
2、多出的空格不会影响容器的宽度(不足以撑开容器)且没�
��溢出容器(容器设置宽度且 ‘overflow : hidden’);
3、容器 ‘display:none’。
在检测不可视的元素时,默认不渲染的 TITLE META SCRIPT LINK
标签也会报(它们的父元素设置了 ‘word-wrap :
break-word;’)。它们中间有多少空格都会被合并为一个空格;
如果这些元素中间有一个非以上元素的内联元素,则该元素��
�面的所有空格合并为一个空格,元素后面的空格合并为一个�
��格。这是否需要特殊处理,是否需要补充文章,待讨论(201
0-10-15)。
测试用例:
additional_spaces_no_vistual_effect.html
URL:
http://auction.paipai.com/cgi-bin/auction_fixup_confirm/view
http://c.youku.com/iku/
http://dl.pconline.com.cn/download/51240.html
http://www.alibaba.com/
http://ent.youku.com/
http://news.youku.com/
---------------------------[误报] #2
如果多个中间有空格的隐藏内联元素位于可见元素之前,则��
�有浏览器都不会生成空格。
测试用例:
locate_before_visible_inline_element.html
URL:
http://123.sogou.com/
http://c.youku.com/iku/
http://www.alibaba.com/
http://news.qq.com/
http://www.ku6.com/
http://www.u7758.com/
http://www.kaixin001.com/
http://ent.youku.com/
http://gc.imop.com/passport/reg.php
http://news.youku.com/
---------------------------[误报] #3
当可见元素为块级元素的时候不会生成空格
测试用例:
block_visible_element_inside.html
URL:
http://c.youku.com/iku/
http://dl.pconline.com.cn/download/51240.html
http://news.qq.com/
http://www.u7758.com/
http://www.kaixin001.com/
http://ent.youku.com/
http://news.youku.com/
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 8:35
Attachments:
------------------------------[误报]
并未设定 TABLE 的 ‘margin-left’ 或于
‘margin-right’,只设置了 ‘align=center’ 时,不应当报错。
var computedStyle = chrome_comp.getComputedStyle(node);
if (computedStyle.marginLeft != 'auto' ||
computedStyle.marginRight != 'auto')
在 Chrome 中,以上代码获取的 marginLeft 和 marginRight
永远不会是
‘auto’,而是一个计算后的单位为像素的相对长度值。
测试用例:
table_margin_affects_align_center.html
URL:(目前凡是页面中有 TABLE align=center 的都会报错)
http://1314.qq.com/
http://astro.lady.qq.com/
http://astro.sina.com.cn/
http://auto.ifeng.com/
http://news.qq.com/
...
------------------------------[误报]
明确设定 TABLE 的 ‘margin-left’ 等于
‘margin-right’,且刚好等于 TABLE align=center
时两侧外边距包含块内边的距离时,所有浏览器中 TABLE
都居中。
即当 TABLE 两侧实际的外边距相等时的情况,不应当报错。
本误报与上一误报可统一判断计算后的 margin-left 和
margin-right 值是否相等或仅差 1px。
这两个值在仅在 Chrome 和 Safari
中返回一个计算后的单位为像素的相对长度值,当 TABLE
的容器内边框宽度减去 TABLE 的宽度后不能被 2
整除时,margin-right 会比 margin-left 多 1px。
在 IE 中,则都返回 auto,Firefox 和 Opera 则返回 0px。
测试用例:
table_margin_affects_align_center_margin_left_equals_right.html
URL:
暂无
------------------------------[漏报]
设置了 ‘margin’ 和 ‘align=center’ 的 TABLE 元素的 ‘align’
属性值非全部小写的情况未被检测,如:
<table cellspacing="0" style="width:200px; margin:10px; background:gold;"
align="CENTER">
测试用例:
table_margin_affects_align_center_case_insensitive.html
------------------------------[误报]
当设置了 align=”center” 的 TABLE 的父元素 display 为 inline
时,各浏览器表现一致,却报错。
根本原因在于 detector
代码中:parseInt(chrome_comp.getComputedStyle(node.parentNode).width))
返回0。
测试样例:
align_center_table_with_inline_parent.html
URL:
http://18teenvids.com/
http://19yoporn.com/
http://money.cnn.com/2010/11/02/technology/EA_facebook_credits/
http://support.acer-euro.com/drivers/downloads.html
------------------------------[误报]
当设置了 align=”center” 的 TABLE 的父元素 width 设置为0 且
overflow 为 visible 时会有误报,原因同上。
测试样例:
align_center_table_with_width_0_parent.html
URL:
http://absolutist.com/online/bubbleshooter/
------------------------------[误报]
当设置了 align=”center” 的 TABLE 的父元素 width小于 TABLE
时会有误报。
测试样例:
align_center_table_with_less_width_parent.html
URL:
http://crocotube.com/main.php
http://sketchup.google.com/3dwarehouse/
http://famouspornstars.com/
------------------------------[误报]
当设置了 align=”center” 且未设置宽度的 TABLE
元素的包含块与浮动元素重叠且浮动元素与 TABLE
在水平方向上有重叠时,所有浏览器均将
TABLE居中于包含块中未被浮动元素占据的空间内。
测试样例:
float_affect_align_center_table_with_no_width.html
URL:
http://ezinearticles.com/
------------------------------[误报]
当 TABLE 元素的父元素设置了 ‘box-sizing : border-box’, padding
或 border 不为0,且未设置宽度,此时除 IE6(S) IE7(S)
外所有浏览器表现一致,却报错。
根本原因在于使用 chrome_comp.getComputedStyle(node.parentNode).width
得到的是 border-box 的宽度,而非 content-box 的。
测试样例:
align_center_table_with_box-sizing_border-box.html
URL:
http://support.microsoft.com/kb/290301
Original issue reported on code.google.com by [email protected]
on 15 Nov 2010 at 9:45
Attachments:
new
Original issue reported on code.google.com by [email protected]
on 25 Nov 2010 at 8:03
第一轮测试:有误报 (50%)
------------------------------------[误报]
SELECT 的 'disabled' 属性所有浏览器都支持。
var childElements = node.getElementsByTagName('*'); if (!isFormElement
|| childElements.length > 0) { this.addProblem('HF3005', [node]); }
此处的 “||” 运算符导致 SELECT 元素被误报(另外 OPTGROUP
元素如果有 disabled 也将被误报,OPTGROUP 上的 disabled
属性的支持问题见问题 2。)
SELECT.childElementCount 一般都会 > 0。
测试用例:
disabled-select.html
URL:
http://auto.qq.com/
http://ditu.google.cn/
http://news.youku.com/
http://www.autohome.com.cn/
漏报:OPTGROUP、OPTION 元素上的 disabled 属性在 IE6 IE7
中不支持,这是新发现的问题,文章编号
HF3013,正在编写中(20100914)。
测试用例:
disabled-optgroup.html
-------------------------------------------------------------------
第二轮测试:有误报 95% (19/20)
------------------------------------[误报]
当元素内没有文本内容时,使用disabled属性,各显示无差异。
这个情况多存在于左右箭头等提示性交互操作的标记中,用��
�结合js,根据disabled属性值变更箭头显示状态
测试用例:
empty_tag_and_img_disabled.html
URL:
http://www.gsn.com/
http://channelnine.ninemsn.com.au/
http://pixpux.com/
http://www.aol.co.uk/
http://www.ageuk.org.uk/
http://www.csmonitor.com/USA/Election-2010/2010/1102/Vote-2010-How-did-Obama-Dem
ocrats-lose-their-way-on-the-economy
http://www.gsn.com/
http://www.airtransat.ca/en/Home.aspx
……
------------------------------------[误报]
对 IMG 标记使用 disabled 属性,各浏览器无明显表现差异。
测试用例:
empty_tag_and_img_disabled.html
URL:
http://channelnine.ninemsn.com.au/article.aspx?id=738381
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 3:53
Attachments:
第一轮测试:有误报 (极少)
---------------------------[误报] #1
direction=ltr, margin/border/padding - right 在 IE
中能阻止空格被“忽略”,direction-rtl 则反之。
测试用例:
haslayout-full-shape-space-margin-border-padding.html
URL:
暂未发现
---------------------------[漏报] #1 (已修复)
尾部有普通空格的情况未能检测。
测试用例:
haslayout-full-shape-space-end-with-space.html
---------------------------[漏报] #2
有背景色的情况未能检测。
测试用例:
haslayout-full-shape-space-end-with-space.html (即上一个
testcase,仍可用于此问题)
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 9:58
Attachments:
[deleted issue]
第一轮测试:准确
目前未发现问题,需考虑 bordercolorlight 和 bordercolordark 与
bordercolor 颜色一致时无视觉差异的情况。
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 9:21
第一轮测试:有误报(50%)
---------------------------[误报] #1
Chrome 计算固定宽度的表格内的,有 padding 的单元格宽度时有
bug,导致检测有误。
如代码:
<table style="width:100%; table-layout:fixed; font:12px Verdana;">
<tr>
<td style="width:20px; padding:10px; border:5px solid black; background:silver;"><span>text</span></td>
<td> </td>
</tr>
</table>
在 IE(S) Firefox Opera 中,TD 的宽度是应用在其 content box
上的,而在 IE(Q) Chrome Safari 中,TD 的宽度被应用在其 border
box。(查看“计算后的样式”可以看到 -webkit-box-sizing:content
box,因此也可以认为 WebKit 认为 TD 的 content-box 包含 border
area、padding area、content area。即 display:table-cell 导致
-webkit-box-sizing:content-box 跟 -webkit-box-sizing:border-box
的效果一致。)这造成 TD 的宽度在不同浏览器中表现不同。
更多信息请参见 RE8001。
测试用例:
overflow-table-fixed-td-with-padding.html
URL:
http://detail.zol.com.cn/cell_phone_index/subcate57_297_list_1.html
http://detail.zol.com.cn/cell_phone_index/subcate57_list_1.html
http://detail.zol.com.cn/notebook_index/subcate16_list_1.html
---------------------------[漏报] #1
IE8 以下的版本对 table-layout
的计算有问题,即便表格没有设定宽度也认为生效。
文章 RX1002 中准备加入对本问题的补充,本问题编号暂定为
RE1008。
测试用例:
overflow-table-fixed-in-ie.html
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 9:53
Attachments:
第一次检查结果:
------------------------------[误报]
当 ‘align=middle’ 被应用到 IFRAME / EMBED / HR
上时,在各浏览器各模式中也没有差异。在 HA1003
中最初是由于 EMBED 不属于 HTML 4
规范的元素,因此没有提及。IFRAME
是漏掉了,补充中……(20100920)
测试用例:
align_center_iframe_embed_hr.html
URL:
http://auto.ifeng.com/
http://bai.sohu.com/app/house/
http://bbs.chinanews.com.cn/home.shtml
http://blog.tianya.cn/
http://mail.tom.com/
...
------------------------------[误报]
当 ‘align=middle’ 被应用到 display 非 ‘inline’ ‘inline-block’
‘inline-table’ 的 IFRAME / EMBED / APPLET / IMG / OBJECT
上时,在各浏览器各模式中也没有差异。(HR
本来就是块级元素)
测试用例:
align_center_block_level_element.html
URL:
暂未发现
第二次检查结果:
------------------------------[误报]
TD 内 ‘align=middle’ 在所有浏览器中均被解释为
‘text-align:center’。各浏览器中无差异。(RCA中 FF
已经升级将 TD 内 ‘align=middle’ 解释为
‘text-align:center’)
测试用例:
align_center_td_element.html
URL:
http://billing.mail.yahoo.com/bm/MailReg
http://support.dell.com/support/downloads/index.aspx?c=us&l=en&s=gen
http://crictime.com/live-cricket-streaming.htm
http://curezone.com/conversions.asp
http://netpnb.com/index.html
http://www.youtubedownloaderhd.com/
http://www.wheredoivotema.com/bal/myelectioninfo.php
Original issue reported on code.google.com by [email protected]
on 15 Nov 2010 at 10:57
Attachments:
new
Original issue reported on code.google.com by [email protected]
on 25 Nov 2010 at 8:01
第一轮测试:有误报(100%,采样不足)
ChromeBot 中的 URL:
1、sina 的都指向的一个位置的代码:Object._S_gCInfo_v2 :
SG.nav.systemLanguage
2、其余 URL 均指向来自 cnzz.com 的 c.php、stat.php 等文件的:
escape(navigator.systemLanguage)
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 8:50
new
Original issue reported on code.google.com by [email protected]
on 25 Nov 2010 at 8:06
------------------------------[误报]
使用 JQuery 库,并在 BODY 内直接调用
$(window).scrollLeft();
则有误报。
测试用例:
scroll_top_left_jquery.html
URL:
http://auto.sina.com.cn/
http://nb.zol.com.cn/
http://www.tudou.com/
------------------------------[误报]
如果作者使用JQuery库,但是引用js文件名字中不包括jquery时,
则有误报。
例:使用JQuery库,但引用js文件的名字是 global-all.js。
测试用例:
change_JQ_name.html
URL:
http://blog.tianya.cn/blogger/post_show.asp?idWriter=0&Key=0&BlogID=2658346&Post
ID=22036505
……
------------------------------[误报]
若页面使用 pageYOffset 代替 document.body.scrollTop ,pageXOffset
pageXOffset代替 document.body.scrollLeft 时,则有误报。
测试用例:
pageYOffset_body_scroll_top.html
URL:
http://ent.southcn.com/8/2010-09/05/content_15567451.htm
http://lady.southcn.com/6/2010-09/06/content_15610225.htm
……
------------------------------------------------
http://blogs.sacbee.com/capitolalertlatest/2010/11/youth-vote-not-there-for-mari
j.html
http://skyplayer.sky.com/vod/page/default/home.do
------------------------------[误报]
若表达式中仅使用
document.documentElement.scrollLeft 、
document.documentElement.scrollTop、
document.body.scrollLeft 、
document.body.scrollLeft,这四个值中的某一个值时,会有三种情��
�(可能还有其他情况,待补充)出现误报:
1.当该值没有真正用于某个 DOM 对象的 top
属性计算时,出现误报。
测试用例:
no_actual_used.html
URL:
http://ent.163.com/special/00032ICH/newhlm.html
http://sports.163.com/10/0906/02/6FS776G500051C8U.html
http://wenwen.soso.com/z/q144635139.htm
……
2.当该值用于某个 DOM 对象的 top 属性计算,但该 DOM
对象在页面不可见,出现误报。
URL:
http://bbs.qqyy.com/showtopic-16749.html
……
------------------------------------------------------
http://cinemablend.com/games/Call-Of-Duty-Black-Ops-Release-Date-Announced-24314
.html
http://www.freeads.co.uk/
http://www.hindilinks4u.net/
http://netscape.aol.com/
http://slashdot.org/
http://cricket.yahoo.com/
3.文档模式是quirks
mode,并且作者使用document.body.scrollTop和document.body.scrollLeft,��
�浏览器均显示正常,出现误报。
测试用例:
quirks_document_body_only.html
URL:
http://www.3gp2.net/
http://hi.baidu.com/%B9%A2%CE%C5/blog/item/03a0a3eca458a837269791b9.html/cmtid/e
0a4441057ee87f1c2ce795d
http://fibawc2010.163.com/10/0905/06/6FQ0QVHJ00050168.html
http://patch.ali213.net/
http://shihuan30.blog.sohu.com/159210803.html
http://www.123cha.com/hl/?q=100&from=EUR&to=CNY&s=EURCNY#symbol=EURCNY=X;range=3
m;
http://www.apta.gov.cn/index.php
……
-------------------------------------------------
http://encarta.msn.com/encnet/features/dictionary/dictionaryhome.aspx
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 2:24
Attachments:
第一次测试:误报 60%
---------------------------------------------------------[误报]
仅当图片的 ‘display’ 是 ‘inline’ 或 ‘inline-block’
时才有此问题,其他情况无此问题。RT3001
文章中未提及这点,补充中(20100917)。
另外,图片的父元素是块级元素但未设定 text-decoration
时,图片也不受影响。
测试用例:
img-text-decoration-block.html
URL:
http://ent.sina.com.cn/
http://zj.zol.com.cn/
http://www.56.com/
http://video.soso.com/
误报:当图片为绝对定位或固定定位时误报。
测试用例:
img-text-decoration-absolute-fixed.html
漏报:当图片的父元素为行内元素时漏报。
测试用例:
img-text-decoration-inline-parent.html
漏报:当图片的两侧有空格(全角、半角 +
white-space:pre)时漏报。
测试用例:
img-text-decoration-inline-white-space.html
-----------------------------------------------------------------------
第二次测试:误报 95% (19/20)
注释:由于 chrome 9 dev 的渲染方式已经修改为与 IE Opera
Firefox(Q) Chrome(Q) Safari(Q)
一致,此处的误报数量为所有浏览器表现均相同的 URL 数量。
---------------------------------------------------------[误报]
除 IMG
外,不存在其他行内元素时,所有浏览器都不产生下划线。
测试用例:
text_decoration_warp_once_img.html
URL:
http://www.nbc.com/
http://www.rightpundits.com/?p=7603
http://edmonton.kijiji.ca/
http://www.theupsstore.com/Pages/index.aspx
http://www.flashget.com/index_en.html
http://www.ebgames.com//
http://www.whatsontv.co.uk/
http://www.waldenu.edu/
http://www.usgs.gov/
http://www.tourism.gov.my/
……
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 7:19
Attachments:
new, still use chrome_comp.getDefinedStylePropertyByName().
Original issue reported on code.google.com by [email protected]
on 25 Nov 2010 at 8:02
第一轮测试:有误报 (25% [1/4] 采样不足)
---------------------------[误报] #1
设置了 ‘position:absolute;’ 的元素在 IE6 IE7 IE8(Q) 和 Chrome
下都会渲染父元素(内联元素或块元素)的 ‘text-decoration’
特性效果(underline等),RT3002 中包含了这种情况。
测试样例:
position_absolute_text-decoration.html
URL:
http://video.soso.com/
---------------------------[用法有问题,没有实际视觉影响] #1
元素 ‘display’ 为 ‘inline-block’
且存在同级内联元素时,IE6 IE7 IE8(Q) 与 Chrome
一致,都会为该元素渲染父元素(内联元素或块元素)的
‘text-decoration’ 的特性效果(underline 等)。
测试样例:
inline-block_with_inline_sibling.html
URL:
http://ent.sina.com.cn/
http://news.sina.com.cn/
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 9:02
Attachments:
第一次检查结果:
------------------------------[漏报]
经大量测试,证明 HY1005 文章错误,不应该是《IE6 IE7 IE8(Q)
中对 UL OL DL
内包含非列表元素的处理跟其他浏览器不同》,根本原因应��
�是《IE6 IE7 IE8(Q) 会忽略 LI DD DT
元素的结束标记》,跟他们的父元素是 UL OL DL 没关系。
文章已更正。
测试用例:
invalid-sibling-li-dt-dd.html
根据测试结果编写的 detector:
function checkNode(node, additionalData) {
if (node.nodeType != Node.ELEMENT_NODE) return;
var tagName = node.tagName;
var tagList = {
"LI":["LI"],
"DT":["DT","DD"],
"DD":["DT","DD"]
};
if (tagList.hasOwnProperty(tagName)) {
var nextElement = node;
var allowableTag = tagList[tagName];
while ((nextElement = nextElement.nextElementSibling) && allowableTag.indexOf(nextElement.tagName) == -1) { //是否加标记防止重复检查一个元素多次?
if (nextElement.offsetWidth && nextElement.offsetHeight) { //或者换成检测 SCRIPT 和 STYLE 元素,这是为了保证不可见的元素不报错。
this.addProblem('HY1005', [nextElement]);
}
}
}
}
第一次检查结果:
基本无严格意义上误报,但需根据布局情况对检测代码稍作��
�整。
建议:
如果 LI DD DT 元素后仅含有 BR
标记或一个文本字符,是否应该消除问题提示。他们基本不��
�对布局产生影响。
Original issue reported on code.google.com by [email protected]
on 15 Nov 2010 at 11:01
------------------------------[误报]
如果页面内的脚本尝试判断一个 DOM 对象是否有
‘onmouseenter’ 时,由于 detector 预先植入了一个 fack
的同名对象,导致遍历的同时报错。
this.hookHandler_ = function(oldValue, newValue, reason) {
This.addProblem('BT9017', { nodes: [this], needsStack: true });
return newValue;
测试用例:
mouse_enter_leave.html
URL:
http://auto.sina.com.cn/
http://ent.cn.yahoo.com/
http://www.chinanews.com.cn/taiwan/index.shtml
...
------------------------------[误报]
页面中同时使用 onmouseout 和
onmouseleave事件,则不会有兼容性问题,误报。
测试用例:
both_mouse_leave_and_mouse_out.html
URL:
http://www.oddschecker.com/
http://www.sportsmansguide.com/net/Main.aspx?
http://www.sprint.com/contactus/
http://corporate.troweprice.com/ccw/home.do
------------------------------[误报]
页面使用了onmouseleave和onmouseenter事件,但是在css中又使用了��
�伪类hover的方式,显示/隐藏子元素,则不会有兼容性问题,�
��报。
测试用例:
mouse_leave_enter_and_hover.html
URL:
http://www.deviantart.com/
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 2:16
Attachments:
new
Original issue reported on code.google.com by [email protected]
on 25 Nov 2010 at 8:00
第一轮测试:准确(采样不足)
采样不足,1 URL :http://www.hao123.com/ttplayer.htm
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 8:52
第一次检测结果:误报 (56%)
---------------------------[误报]
当一个空单元格所在行有更高的单元格,或其本身设置了
height 时误报。如果设置的高度不小于 padding-top + padding-bottom
时,在 IE 中看不出高度上的差异。就是说,一个空单元格在
IE6 IE7 IE8(Q) 中的最终高度也许会大于等于上下 padding 的和。
测试用例:
empty_cell_height_specified.html
URL:
http://auto.sohu.com/
http://data.eastmoney.com/xg/xg/default.html
http://fundacc2.eastmoney.com/fundsearch.aspx
http://hd.gougou.com/
http://news.qq.com/photo.shtml
http://stock.eastmoney.com/newstock.html
http://tieba.baidu.com/
http://www.565656.com/
http://www.hao123.com/car.htm
-------------------------------------------------------------------------
第二次检查结果:误报 67% (10/15)
---------------------------[误报]
当TD内存在其他设置了padding 的元素后会产生误报。
测试用例:
empty_cell_wrap_other_tag.html
URL:
http://en.wikipedia.org/wiki/3G
http://listentotaxman.com/
http://nicki-minaj.org/
http://pixpux.com/
http://www.amazon.co.uk/Nintendo-Wii-Console-Sports/dp/B0007UATDG
http://www.tip.it/runescape/
---------------------------[误报]
只是空 TD (包括TD内含注释),没有设置 padding 也会产生误报
。
测试用例:
empty_cell.html
URL:
http://www.altavista.com/
http://www.visitflorida.com/
http://www.z1035.com/
http://www.uptodate.com/home/index.html
Original issue reported on code.google.com by [email protected]
on 15 Nov 2010 at 11:21
Attachments:
第一次检测:有误报 (采样较少[1个])
----------------------------[误报]
Detector 的脚本使用 chrome_comp.getDefinedStylePropertyByName(node, false,
'width') 获取到的 MARQUEE 的 'width' 是 'undefined'。
然后将 MARQUEE 的 'display' 设置为 'none',取其
parentNode.offsetWidth,得到 0。从而导致误报。
造成上述现象需要一个条件:代码 </marquee></td>
之间不能有空白字符,必须紧密相联。这个问题的根本原因��
�在分析中。
以一个空元素替换 MARQUEE,而不将 MARQUEE 设为 display:none
可避免形成“空单元格”(这并不是空单元格,但其表现很��
�空单元格)导致判断错误。
var node = document.getElementsByTagName("marquee")[0];
var parentNode = node.parentNode;
var oldWidth = parentNode.offsetWidth;
var placeHolder = document.createElement("var");
parentNode.replaceChild(placeHolder, node);
alert("replaceChild\n新宽度:" + parentNode.offsetWidth + "\n旧宽度:"
+ oldWidth);
parentNode.replaceChild(node, placeHolder);
placeHolder = null;
谨慎起见,还要提前准备一个特殊的样式,并加强所有设置��
�的优先级,以避免受用户设定的样式影响。如:
#chrome_comp_placeHolder{
position: static !important;
float: none !important;
display: inline !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 none !important;
...
}
请参考 test case。
测试用例:
marquee_width.html
URL:
http://www.chinanews.com.cn/
----------------------------------------------------------------------
第二次检测:误报 0% (0/3)
二次测试依然由于采样较少无法确定测试精度,但第一次测��
�提出的 testcase 检测已不误报。
Original issue reported on code.google.com by [email protected]
on 15 Nov 2010 at 11:24
Attachments:
new
Original issue reported on code.google.com by [email protected]
on 25 Nov 2010 at 8:26
------------------------------[误报]
单层次嵌套的百分比高度的表格,如果其容器的高为
‘auto’,在标准模式 (S)
下各浏览器的表现是一致的。在混杂模式 (Q) 中才会有差异。
测试用例:
percent_height_in_auto_height.html
URL:
http://detail.zol.com.cn/cell_phone_index/subcate57_297_list_1.html
http://www.hao123.com
------------------------------[漏报]
设置为百分比高度的元素
‘display:list-item/inline-block/inline-table’ 时在 Chrome 和 IE
的混杂模式 (Q) 中也有差异题,但没有报告错误。
关于此问题,可参考最近完成的文章
http://www.w3help.org/zh-cn/causes/RD8026,这篇文章专门描述非表格元
素的高度计算问题,它和 RD8010 有些共同点,但没有和 RD8010
合并是因为:
1. CSS 规范中,对于表格和其他元素的高度计算是分开来描述的。
2. RD8010 中描述的 TABLE 在 Firefox 中又有特殊表现。
测试用例:
percent_height_in_auto_height_inline_block.html
------------------------------[误报]
在混杂模式中,页面结构简单,仅用 TABLE 布局,若 TABLE
的高度是百分比,且TABLE
的包含块没有设置高度或设置了百分比高度,各浏览器表现��
�致,则有误报。
测试用例:
percent_height_table_in_quirk.html
URL:
http://www.asciitable.com/
http://encarta.msn.com/encnet/features/dictionary/dictionaryhome.aspx
http://rubistar.4teachers.org/
http://www.bostonmarket.com/home
http://www.eduweb.com/amazon.html
http://www.jcpenney.com/products/Cg13344.jsp
http://www.jkrowling.com/
http://www.rarlab.com/
http://www.superantispyware.com/
http://www.usajobs.opm.gov/
Original issue reported on code.google.com by [email protected]
on 16 Nov 2010 at 2:30
Attachments:
new, can't detect '-moz-user-select : none' currently.
Original issue reported on code.google.com by [email protected]
on 25 Nov 2010 at 8:07
------------------------------[误报]
当设置了 align attribute
的元素即便不换行也不会溢出其容器的情况下,不应当报错��
�
测试用例:
align_nowrap_not_overflow.html
URL:
http://minigame.qq.com/act/gamepet/shop.html
http://www.565656.com/
http://www.tianya.cn/focus/index.shtml
------------------------------[误报]
当设置了 align attribute
的元素由于不换行而将会溢出其容器时,如果该容器是不可��
�的,则不应当报错。
判断该元素本身的尺寸也可以:
ElementNode.offsetWidth && ElementNode.offsetHeight
测试用例:
align_nowrap_invisible.html
URL:
http://minigame.qq.com/act/gamepet/shop.html
------------------------------[漏报]
不仅是 TABLE,IMG,IFRAME,OBJECT 元素有此问题,APPLET 和 EMBED
也有此问题。已在文章 RX8015 中以注释的形式补充。(APPLET
早已被废弃,EMBED 目前非标准。)
测试用例:
align_nowrap_embed_applet.html
------------------------------[误报]
当内联元素占据使用 align=”left” 或 align=”right”
属性产生浮动的元素的右侧或左侧空白空间并将其它浮动元��
�挤到上一个浮动元素下时,各浏览器表现一致,却报错。
测试样例:
inline_effect_float_position.html
URL:
http://www.monsoon.co.uk/accessorize/icat/accessorize/
------------------------------[误报]
当容器能够容纳多个使用 align=”left” 或 align=”right”
属性产生浮动的元素,且后一个浮动元素设置 ‘margin-left’
或 ‘margin-right’ 为负值时各浏览器表现一致,但报错。
测试样例:
float_with_margin-left_margin-right.html
URL:
http://adult-sex-games.com/
Original issue reported on code.google.com by [email protected]
on 15 Nov 2010 at 9:54
第一次检查结果:
使用中文 1000 个 URL,共 4 个有问题的 URL,只有 1
个检测正确,其余 3 个已改版,采样不足。
第二次检查结果:
使用英文 10000 个 URL,发现 77 个 URL 有问题
------------------------------[误报]
作者使用 getElementById 取页面元素的 name
,但随后又getElementsByTagName
取页面指定的标签名,从而回避了此问题,会有误报。
测试用例:
both_getElementById_getElementsByTagName.html
URL:
http://learning.blogs.nytimes.com/
------------------------------[误报]
把元素的 name 传递给 JQuery 的 $(“#”)方法
,所有浏览器都不能获取该元素,也不能给该元素绑定事件��
�不会有兼容性问题,会有误报。
(Huang Hao: 能否通过判断当前是否是使用 JQuery 解决?)
测试用例:
use_name_to_$.html
URL:
http://www.mousebreaker.com/
http://www.haaretz.com/
http://www.jta.org/news/article/2010/11/01/2741537/jews-attending-jon-stewart-sa
nity-rally-find-plent-of-like-minded
------------------------------[误报]
一个元素同时有 name 和 id ,作者把 name 传递给 JQuery 的
$(“#”)方法,获取该元素并做逻辑处理,同时又把 id
传递给 getElementById
方法,获取该元素并做同样的逻辑处理,此种做法虽然有代��
�冗余,但是也是维护原有代码的办法,不会有兼容性问题,�
��有误报。
(Huang Hao: 检测既有 id 又有 name 的元素)
测试用例:
use_name_to_$_and_getElementById.html
URL:
http://www.united.com/mileageplus
------------------------------[误报]
把元素的 name 和 id 都传递给 JQuery 的
$(“#”)方法,则不会有兼容性问题,会有误报。
(Huang Hao: 检测既有 id 又有 name 的元素)
测试用例:
both_use_name_id_to_$.html
URL:
http://www.septa.org/
Original issue reported on code.google.com by sundongguo
on 15 Nov 2010 at 9:04
Attachments:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.