CSS Expression 的优化

IE 浏览器中 CSS Expression 特性的最大的问题:会反复执行,每秒钟可能执行了成百上千次,有严重的性能问题。 如何对 CSS Expression 进行优化呢? 至少:如果我们将 CSS Expression 在匹配的元素中仅执行一次,性能将会提升很大。 old9 在 《CSS Expression Reloaded》一文中提供了一个解决方案: 在 CSS Expression 语句体里,将触发该 Expression 的 CSS 属性重置。 例如: div { zoom: expression(function(el){el.style.zoom = “1”; alert(el.tagName);}(this)); } 补充几点: CSS Expression 执行在任意一个匹配的元素上。 在 CSS expression 内, “this”关键字指向当前匹配的 HTML 元素。 CSS 属性选用一些不常用的属性来触发,触发完重置回默认值。 最近在 Ajaxian 的文章《Creating a querySelector for IE […]

... 18 条评论 »

如何在 IE 中使用 HTML5 元素

Sjoerd Visscher 发现了一个简洁的 方法 让样式在 IE 中作用到未知的元素上——仅需 JS 创建此未知元素即可: document.createElement(elementName) 同理(对于 IE 来说 HTML5 元素即是未知元素),该方法也可顺延到 HTML5 的元素上(详细见:John Resig 写的 《HTML5 Shiv》 一文): <html> <head> <style>section { color: red; }</style> <script>document.createElement(“section”)</script> </head> <body> <section>Hello World!</section> </body> </html> 在 IE 中,为了更方便使用 HTML5 元素,我们可以引入这样的脚本: (function(){ // from: http://dean.edwards.name/weblog/2007/03/sniff/ if(!/*@cc_on!@*/0) return; var html5 = “abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video”.split(‘,’); for(... 29 条评论 »

如何快速定位页面中复杂 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 条评论 »

可以给img元素设置背景图

惊叹于老外的发现 《CSS Background image on html image element?》,自己从没关注过,也没想过如此的问题。 实现方法很简单:设置 img 元素为块元素(display:block;),并赋一个 padding 值。 例如(simple demo ): img { display:block; background:url(‘parallax.gif’) no-repeat bottom left; padding:93px 100px 75px 100px; } 根据上面的原理,举一反三,通过类似的方法,我们还可以给 img 元素设置双边: img { display:block; padding:1px; background:red; border:1px solid black; }

... 38 条评论 »

Google Chrome 浏览器支持的 CSS 选择器

Google Chrome 浏览器是基于 Safari 正在使用的 Webkit 引擎,使用的版本是 AppleWebKit/525.13 。不过 Safari3.1 使用的是最新版本:AppleWebKit/525.18。 那 Google Chrome 浏览器对 CSS 选择器的支持又如何呢?感谢 Engage 公司的女前端开发工程师 Estelle 测试整理的《Google Chrome Browser CSS Selector Support》:http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/

... 24 条评论 »

position:relative 的使用限制

在 W3C 规范中 position 是可以使用在任何元素上的,但 position:relative 却有部分例外: The effect of ‘position:relative’ on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined. 经测试,在浏览器(IE 除外)中给 table 定义 position:relative 属性是无效的。如果的确需要在表格中使用该属性,建议在单元格中嵌套一个 div 元素,再在其上设置 position:relative 属性来模拟。

... 19 条评论 »

XHTML1.1 Tags List

http://ore.to/htmllint/tagslist.cgi?HTMLVersion=XHTML11

... 2 条评论 »

line-height 属性的继承问题

淘宝商城的 detail 页面“产品详情”部分是商家自定义区块,曾出现这样一个问题: <style type=”text/css”> p { line-height:17px; } </style> <div class="mdse-detail"> <p> <strong style="font-size:30px"> 品牌:XZX<br /> 市场价:145元<br /> 颜色:黑色<br /> 面料:棉<br /> 尺码:S M L<br /> 衣长:S 89 M 90 L 91<br /> 肩宽:S 35 M 36 L 37<br /> 胸围:S 88 M 92 L 96<br /> 下摆:S 104 M 108 L 112<br /> […]

... 19 条评论 »

如何给 legend 标签设定宽度

我们在做表单的时候经常会使用到这样的结构: <fieldset> <legend>哪些浏览器legend标签设定的宽度有效</legend> <input type=”checkbox” value=”ie6″ name=”width” id=”ie6″ checked=”checked” /><label for=”ie6″>IE6</label> <input type=”checkbox” value=”ie7″ name=”width” id=”ie7″checked=”checked” /><label for=”firefox”>IE7</label> <input type=”checkbox” value=”firefox2″ name=”width” id=”firefox2″ /><label for=”firefox2″>Firefox2</label> <input type=”checkbox” value=”firefox3″ name=”width” id=”firefox3″ /><label for=”firefox3″>Firefox3</label> <input type=”checkbox” value=”opera” name=&... 14 条评论 »