相关标签

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 条评论 »

影响 reflow 的因素及其优化

如果对于 reflow 这个概念你还不太清楚或者不知道,请先阅读: 《Notes on HTML Reflow》 《What is a reflow?》 《Gecko:Reflow Refactoring》 《reflow》 《形象化的reflow》 《样式的执行效率-reflow》 Yahoo! 性能工程师 Nicole Sullivan 在最新的文章 《Reflows & Repaints: CSS Performance making your JavaScript slow?》 中总结了导致 reflow 发生的一些因素: 调整窗口大小(Resizing the window) 改变字体(Changing the font) 增加或者移除样式表(Adding or removing a stylesheet) 内容变化,比如用户在input框中输入文字(Content changes, such as a user typing text in an input […]

... 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 条评论 »

可以给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 条评论 »

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 条评论 »

如何跨浏览器使用连续字符的换行

由于连续的字符(字母、符号、数字)在默认情况下是不换行的,可能会破坏整个界面布局。 那如何解决这个问题呢? 在 IE 和 Safari 1.3+ 下相对比较容易解决,使用 CSS 属性 word-wrap: break-word;。有朋友会问为什么不是使用 word-break:break-all; ,因为有一个特殊的情况,该属性无法解决换行——连续的英文标点符号。 注:word-break 主要使用在 CJK 文本,即:中文(Chinese)、日文(Japanese)、韩文(Korean)。 而 Firefox 和 Opera 浏览器,无法识别 word-wrap: break-word; 和 word-break:break-all; 属性。可以通过脚本给连续字符的每个字符之间插入 \ u8203 的字符(该字符在非 IE 浏览下不占据空间),使连续变为了不连续,达到了换行的效果。 breakWord = function(dEl){ var dWalker = document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null, false); var node,s,c = String.fromCharCode(‘8203’); while (... 18 条评论 »

两个不太常用的 CSS Hack

1、仅 Safari 和 Opera 识别的 Hack @media all and (min-width: 0px) { /* Safari and Opera rules here */ } 或者 @media screen and (-webkit-min-device-pixel-ratio:0) { /* Safari and Opera rules here */ } 注:这里所指代的 Safari 和 Opera 一般为最新版本。 2、仅 Firefox 3 和 IE7 识别的 Hack selector, x:-moz-any-link, x:default { /* Firefox 3 and IE7 […]

... 16 条评论 »