CSS - Hi, I’m Adam Lu.

2010/02/08CSS

1 Comments

适当使用CSS3，让你的设计/开发提前进入下一个高度

此DEMO主要讨论了现阶段我们可以怎样去使用CSS3用到我们的项目当中，遵循优雅降级的原则，让支持CSS3的浏览器表现完美，而让不支持CSS3的浏览器如IE表现一般，同时也给出了IE下的一些解决方案。

2010/01/22CSS

3 Comments

1.看到了一个新的Clearfix写法如下：
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: ” “;
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

2.如何居中Block元素
这篇文章http://11heavens.com/how-to-shrinkwrap-and-center-a-block-element-inside-a-block-element 讲了如何居中一个Block元素。
<div class=”outer”>
<div class=”inner”>
<div class=”content”></div>
</div>
</div>
<style>
.outer{position:absolute; right:50%;}
.inner{position:relative; left:50%; overflow:hidden;}
.content{float:left;}
</style>

3.CSS圆角
介绍两种CSS圆角的方法，第一种是用很多1像素高的div容器，利用背景色和边框色来模拟出圆角框的轮廓线。Demo看此
另一种是用特殊字符（&bull），利用定位，截取四分之一圆模拟出圆角框的一个角图片。Demo看此

4.CSS文字排版
text-decoration: blink可以让文字闪动(Firefox和Opera)
font-variant: normal|small-caps|inherit

5.IE8的Document Mode和Browser Mode
三种document mode:IE5/IE7/IE8，通过使用<meta http-equiv = “X-UA-Compatible” content=”IE=IEVERSION”>来强制使用某种document mode，IEVERSION可以是：Edge/EmulateIE8/EmulateIE7/8/7/5
三种browser mode:IE8/IE8 Compatibility/IE7，默认是IE8, IE8 Compatibility当点击兼容性视图按钮时会出现，IE7是在IE WebDeveoper Tool会出现一个选项，通常都是IE8模式
document mode被用来决定哪些特性影响当前的页面，包括哪些CSS特性和JS特性的可用和不可用，browser mode会影响document mode当X-UA-Compatible没有被指定的时候。
更多精彩内容请看Zakas的这篇文章“Internet Explorer 8 document and browser modes”

6.Css border方式实现三角
.arrow{
height:0;
width:0;
overflow:hidden;
/*非IE6支持 transparent ，IE6用dashed边框模拟透明（此时border-width*5>height）
border-left:5px dashed transparent;
border-right:5px dashed transparent;
border-bottom:5px solid #f00;
}
详情请看淘宝UED渔隐的这篇文章http://blog.silentash.com/2009/12/ie6-border-transparent/

2010/01/07CSS, UI/UE

2 Comments

关于IE的bug(CSS)-续

前面一篇文章说了IE的一些bug，现再来继续说一下。

15.图片浮动List标记错位bug，影响版本IE8, 当List里面有浮动的image时，List标记显示的位置跑在里面了，可以通过使用背景图片代替List自带的标记来解决。
16.TH没有继承Text-Align属性的bug，影响版本IE8，当给table设置text-align时，TH没有继承样式，可以通过给TH设置text-align:inherit;来解决IE8下这个丑陋的bug。
17.32个Style限制，影响版本ie6/7/8, 在32个”style”方法(style, link, @import)后浏览器会忽略后面的样式
18.白色背景hover bug，影响版本ie7, 给hover设置background-color:#ffffff;时，背景不会改变，解决方法是设置background:#ffffff;
19.* html bug，影响版本ie6，* html [selector]在ie6下通常不会被忽略，这个bug通常被用来作IE6的hack使用。
20.!important bug, 影响版本ie6, 在important之后设置同样的规则后important会被忽略，这个bug也常被用来指定ie6的样式。
21.png图片和背景颜色不一致，影响版本ie6/7/8, 设置背景颜色和png图片背景同样的颜色代码最后表现不一致，原来是因为ie支持“PNG Gamma profiles”，解决方案是通过一个pngcrush程序来优化图片。
22.auto margin居中bug, 影响版本ie6/7/8, 给block元素设置margin auto无法居中，出现这种bug的原因通常是没有Doctype，然后触发了ie的quirks mode，加上<!DOCTYPE html>就可以了。
23.:first-line/:first-letter里的!important会忽略，影响版本ie8, 在:first-line/:first-letter里应用!important的规则会被忽略，解决方法就是不用!important
24.:first-letter被忽略的bug, 影响版本ie6, 当:first-letter前面有逗号的时候ie6会忽略这条规则，解决方法是将:first-letter放到最后。
25.浮动元素的阶梯bug, 影响版本ie6/7, 当给一系列<li>里面的浮动元素设置font-size后会出现阶梯效果，解决方案是给li设置display:inline;
26.List背景消失bug, 影响版本ie6, 当给浮动的div里面的dt, dd, dl设置背景时不显示，解决方案是给dt, dd, dl加上position:relative;
27.noscript样式bug, 影响版本ie6/7/8, 当js可用的时候如果给noscript设置border和背景都可以显示，解决方法就是通过给noscript设置display:none;
28.透明区域无法点击bug, 影响版本ie6/7/8，当给一个display:block元素使用filter来支持png透明的时候，透明区域无法点击，解决方法是不要使用background:none;filter…，而是background:url(#);filter…
29.List标记偏移，影响版本ie8, 当给list里面的元素设置display和overflow属性后List标记会偏移，解决方法是给里面的元素加一个float:right; width:100%;可以使用ie的条件注释针对ie8
30.ol数字标记不自增, 影响版本ie6/7, 当给li设置宽度时会触发这个bug，解决方法是给li设置display:list-item
31.ul/ol标记消失bug, 影响版本ie6/7, 当ul/ol触发了layout并且有margin-left会触发这个bug，解决方案是给li设置margin-left
32.图片不垂直居中，影响版本ie6/7, 当使用line-height来居中图片时在ie6/7下不会生效，解决方法是在img后加一个空白元素如<span></span>
33.没有背景图片bug, 影响版本ie6/7/8, 当使用background的时候如果在url()后没有加空格背景图片就不会显示。
34.自定义鼠标bug, 影响版本ie6/7/8, 当自定义鼠标样式的时候，如果url()里面的路径是相对路径的话，ie会认为相对于当前文档而不会出现鼠标样式的图片，解决方法是采用绝对路径。
35.背景溢出bug, 影响版本ie6, 一个容器里面有浮动元素并且通过加一个clear:both的额外div来清除浮动会产生此bug，解决方案就是建议尽量不要通过增加一个clear:both的div来清除浮动，可以通过在外层加上overflow:hidden;对于ie可以通过加上zoom:1；来触发ie的layout
36.高度扩展bug, 影响版本ie6, 当高度很窄如小于12px时ie6会扩展高度，解决方法是设置overlfow:hidden或font-size:0;
37.宽度扩展bug, 影响版本ie6, 当连续英文字符的时候设定宽度不起作用，解决方法是设置overflow:hidden或word-wrap:break-word;
38.浮动双margin，影响版本ie6, 当给一个浮动元素设置margin-left或margin-right时margin加倍，解决方法是加上一条display:inline;
39.负margin bug, 影响版本ie6/7, 当给一个有layout容器里面的元素设置负marin时内容会被截断，解决方法是不让容器有layout或者给负marin的元素设置position:relative;zoom:1;
40.3px间距bug, 影响版本ie6, 当几个连续浮动且有layout的元素排列时会有3px的间距，解决方法就是给这些元素设置3px的负margin或加上overflow:hidden;
41.text-align bug, 影响版本ie6/7, 当容器外面设置了text-align，如果容器里面有文本和其他block的元素, block的元素也会继承text-align，这是不正确的，解决方法是重新写出合理的有语义的markup，如文本外面加一个p.

更多详细的内容请看http://haslayout.net/css/和http://coolshell.cn/?p=1245

WebRebuild大会演讲《揭秘HTML5和CSS3》分享

昨天在WebRebuild大会上分享了《揭秘HTML5和CSS3》，现来总结一下。
PPT在这里：

View more presentations from Adam Lu.

互联网的发展总是在不断地催生新技术的产生，而HTML5和CSS3是最近一直被讨论的热门话题，对于每个互联网开发者尤其是前端开发者而言，都充满了好奇与渴望。那么HTML5和CSS3究竟有哪些让我们眼前一亮的东西呢？

HTML5

HTML 5草案的前身名为Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。 HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。那么我们来看一下HTML5的技术概览有哪些：

HTML5新增和移除的元素

HTML5新增了很多多媒体和交互性元素如video, audio，在HTML4当中如果要嵌入一个视频或是音频的话需要引入一大段的代码，还有兼容各个浏览器，而HTML5只需要通过引入一个标签就可以，就像img标签一样方便。在页面布局和内容实现方面HTML5新增了很多结构化标签元素以及块级及语义元素，如果你要用HTML表示一个文件的上传进度条，在 HTML5中你可以用progress这个元素来表示，它有一个value属性描述了已经完成了多少任务，还有一个属性max描述了这个任务一共需要多少，还可以通过DOM接口得到这个进度条的position属性(只读)，也就是任务完成的百分比。Youtube在HTML5技术上已经做了一个尝试，http://www.youtube.com/html5(需要翻墙) 是用HTML5做的一个DEMO，从整个页面源代码来看，非常简洁。当然HTML5也对一些元素新增了一些属性，如input和textarea的 placeholder属性，相当于输入框的输入提示，script有一个async属性会影响脚本的加载和执行。对于所有的HTML共有的属性我们通常把它称作是“全局属性”，如class, id, tabindex, title，HTML5也新增了一些全局属性，如contenteditable, contextmenu, hidden等属性。HTML5还增加了对于微数据的支持，如HTML5新增的item, itempro, subject等属性。

当然HTML5也移除了一些表示页面展现的元素，如font, center, strike等，这些本应该是CSS来做的，所以还是很好理解的，也移除了一些影响网站可访问性的元素如frame, frameset, noframe以及一些不常用的元素如acronym，而采用abbr来表示缩写。HTML5还移除了一些影响客户端兼容性的HTML熟悉，如link的 rev属性，td的scope属性；HTML5也移除了一些表示页面展现的属性如一些元素的align,bgcolor属性。

HTML5对表单的支持

HTML5 提供了强大的控件类型如url, email, date, tel等，强大的约束属性，如required表示必填，文件上传的accept属性，以及一些表单重复元素模型的支持，HTML5在提交表单的时候还可以设置提交的方式为XML提交方式，这样服务器端接收到的数据将是XML格式，HTML5的表单被定义为“Web Forms 2.0”，目前opera9.5+对Web Forms 2.0的支持较为完美。

点此查看Web Forms 2.0 DEMO，需要Opera9.5+

HTML5 DOM变化

HTML5在DOM LEVEL 2 HTML方面很多都是继承自HTMLDocument的接口，当然HTML5在DOM上也有一些值得注意的新成员，如：支持 getElementsByClassName，可以根据class类名选择元素，getSelection()将会返回当前选中的对象，在选择器上面有两个方法querySelector和querySelectorAll可以根据 css选择符来获取要查询的元素，相当于YUI3中的Y.one和Y.all。

HTML5的Javascript APIs

HTML5在Javascript上面新增了哪些API呢？

Video/Audio: HTML5为Video和Audio提供了API来让开发者控制他们自己的用户界面，如可以播放或暂停媒体内容。
Canvas: Canvas是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。Canvas是一个神奇的东西，它给我的第一感觉就像是在用Photoshop一样，它的每一个方法跟Photoshop 是那么地相似，通过canvas.getContext(’2d’)就可以得到这个canvas的API，你可以通过fillStyle设置其填充颜色或是通过strokeStyle设置其描边颜色，甚至它画路径的操作跟Photoshop的钢笔操作更是不谋而合。Canvas在很多网站都已经有应用，如Firefox的实时下载状态统计，甚至还可以用canvas来编写Web Game。
Drag&Drop: 在指示设备的视觉媒体中，”Drag”的操作就是鼠标按下(mousedown)并伴随着鼠标移动(mousemove)的事件，而”Drop”则是鼠标释放时触发的事件。在Drag&Drop里定义了DataEvent和DataTransfer接口，同时当拖拽操作发生时会触发如 dragstart, dragenter, dragleave, drop, dragend等事件。
Web Workers: 让Javascript多线程，可以在后台做很多工作而不会阻断当前的浏览器操作。
Geolocation: 地理位置定位，运行navigator.geolocation.getCurrentPosition(success,error)这个方法时浏览器会提示是否要共享你的地理位置，如果选择共享，则会回调success函数，success函数有一个参数是position对象，这个position 对象有一个coords对象，coords对象包含了很多地理位置信息如latitude(维度)和longitude(经度)，这样就可以知道你的具体位置了，这个功能在一些手机如Iphone上已经有广泛的应用了。
Application Cache: 这是HTML5对于离线应用的支持，通过在html元素上加一个属性manifest，浏览器会提示你是否要将数据缓存到客户端，如果用户选择了允许，则会按照指定的manifest文件列表缓存需要的文件，当你的网络不可用时，你还是可以使用这个应用的。对于离线应用，Google也开发了Google Gears浏览器扩展，不过最后Google转投HTML5可能也是看到了HTML5存储和离线应用的这种优势。
Storage: Webkit已经实现了database storage，你可以像后端操作数据库一样查询数据并执行一些操作。还有一种存储是键值对存储，如sessionStorage和 localStorage，可以通过setItem和getItem来存储与获取值，相对于Cookie的存储来说，存储的容量要大很多。
X-Document Messaging: 浏览器因为安全和隐私的原因，阻止了不同域之间文档的通信，虽然这是一个安全限制，但是对于那些没有危害的不同域的文档通信带来了很多问题，但是 HTML5可以实现这种跨文档通信，让我们可以不用管源域是来自哪里，同时可以防止脚本攻击。

HTML5让你心动了吗？那么HTML5什么时候会成为标准呢？据说要等到2022年，这有一个很有意思的网站http://ishtml5readyyet.com/告诉你还有多少天HTML5会真正到来。

点击查看HTML5 DEMO，需要Firefox3.5+/Safari4.0+

CSS3

CSS3对于我们Web开发者来说不只是新奇的技术，更重要的是这些全新概念的web应用给我们带来更多无限的可能性，也极大地提高了我们的开发效率。我们将不必再依赖图片或者Javascript 去完成圆角、多背景、用户自定义字体、3D动画、渐变、盒阴影、文字阴影、透明度等提高Web设计质量的特色应用。

CSS3在选择器上面的支持

利用属性选择器我们可以根据属性值的开头或结尾很容易选择某个元素，利用兄弟选择器可以选择同级兄弟结点或紧邻下一个结点的元素，利用伪类选择器可以选择某一类元素，CSS3在选择器上的丰富支持让我们可以灵活的控制样式，而不必为了选择某些元素给他们加上如”odd”或”even”这样的类名。

CSS3在样式上的支持

有一个调查说开发者最期待CSS3的特性是什么，最后票数最多的是“圆角”，不错，圆角这个功能可以给我们这些前端工程师省去很多时间和精力去切图拼凑一个圆角。CSS3还支持阴影，盒阴影以及文本阴影，渐变，之前你可能是通过IE的滤镜看到过，其实CSS3实现起来更加方便。@font-face 可以自定义字体，如果用传统的方式，VD把一个带有特殊文字的设计图给你让你来实现的话你可能会把它做成一个图片，而通过CSS3用@font-face 就可以了。CSS3对于连续文本换行也新增了一个属性word-wrap,你可以设置其为normal(不换行)或break-word(换行)，这解决了连续英文字符出现页面错位的问题，也不需要后端去截取这个连续字符。使用CSS3你还可以给边框加背景，这在iphone上也有应用的例子。CSS3在背景上支持背景调整大小，如当你用一张大图要做一个小的元素背景时可以通过background-size来调整背景图的大小来适应这个元素。CSS3支持opacity, rgba和hsl/a, opacity和rgba的区别是opacity设置的透明对其内容也会产生影响，而rgba只对你应用的元素产生影响。CSS3在布局上对于盒模型提供了支持，可以设置box-sizing为content-box或border-box，应用为content-box就是正常的模式，而应用为 border-box和IE5.5的盒模型很相似，即元素的宽度包括border和padding，这个在布局上可能会比较方便，不用去管到底这个元素会占用多大的宽度，而用content-box还需要手动计算一下这个元素实际占用的宽度。

CSS3对于动画的支持

CSS3支持的动画类型有：transform(变换)、transition(过渡)和animation(动画)。你可以对特定的属性设置 transition，transiton和animation的区别不大，animation的动画是自己定义的，面向的更多的是脚本开发者，往往更加复杂。

为了使用大部分CSS3特性，我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在，大部分浏览器只支持部分CSS3属性。最常见的私有属性是用于Webkit核心浏览器的(比如, Safari)，它们以-webkit-开始，以及Gecko核心的浏览器(比如, Firefox)，以-moz-开始，还有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它们自己的属性扩展（目前只有IE8支持-ms-前缀）

那我们在开发中该如何去用CSS3呢？

我觉得首先是遵循一个优雅降级的原则，比如前面谈到的圆角，我们可以针对Firefox和Safari等这些支持圆角的浏览器中应用CSS圆角，而那些不支持CSS圆角的浏览器则显示为直角。其次就是对于不支持CSS3的浏览器可以使用Javascript来实现，如CSS3任何元素支持:hover伪类，我们就可以对只支持链接:hover的IE6用JS来实现。最后就是在向用户或老板推广新技术的同时也要关注他们的目标与可行性，不能为了技术而技术。

点击查看CSS3 DEMO，需要Firefox3.5+/Safari4.0+

大家还是看PPT吧，从整个大会听下来，觉得克军的演讲《分层语义话模块实践》给我的印象挺深的，同时我也很赞同他的一个观点就是HTML往往被我们所忽视但往往是最重要的一部分，可能未来的几年就是HTML的时代了。

2009/11/21CSS

0 Comments

那些不常用的css

虽然前端做了这么久，可是还记得当初刚开始做前端时一点一点翻着手册的日子，回头去看看，其实有一些css你可能并不知道，无意看到了一篇关于Cascading Style Sheet的博士论文，感觉发明CSS的人简直就是天才，今天又翻了一下CSS2.0的手册，整理了一些不常用但是有用的CSS(注：暂未考虑浏览器兼容性），有些已经CSS3的东西了，如果真正掌握了CSS，可以避免ie6的一些bug，可以参考前面写的一篇文章“关于IE的bug(CSS)”，接下来就是迎接CSS3吧。

1.计数器
counter-increment: none|identifier number
counter-resest: none|identifier number
content: before, content:after{content: counter(name, list-style-type);}

2.@media规则
@medea print, screen, all, aural, braille, embossed, handheld, projection, tty, tv{
body{font-size:10pt;}
}
原来有这么多媒介类型

4.文本方向
direction: ltr|rtl|inherit ,和unicode-bidi:embed|bidi-override混合使用可以应用于内联文本

6.对象剪切
clip:auto|rect(number, number, number, number)

7.quotes: none|string(两个为一组)
content属性的open-quote和close-quote值不产生引号

8.字体描述
@font-face { font-family : name ; src : url ( url ) ; sRules }

9.文本阴影
text-shadow : color || length || length || opacity
可以被用于:first-letter和:first-line

11.转为大写
text-transform : none | capitalize | uppercase | lowercase，这在很多国外网站中会看到

2009/11/05CSS

4 Comments

用Data URI Scheme嵌入内联图像

高性能网站的一个建议是减少HTTP连接数，所以使用内联图像嵌入页面可以减少HTTP连接数。目前浏览器支持Data URI的有：Opera 7.2+, Firefox, Safari, Netscape, Mozilla， IE8

Data URI Scheme

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

例如：

<img src=”data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7″

对于IE8以下的版本，可以使用MHTML(Multipurpose Internet Mail Extensions HyperText Markup Language)，例如：

/*
Content-Type: multipart/related; boundary=”_ANY_SEPARATOR”

–_ANY_SEPARATOR
Content-Location:somestring
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAA[...snip...]SuQmCC
*/

#myid {
/* normal browsers */
background-image: url(”data:image/png;base64,iVBORw0[...snip...]“);
/* IE < 8 targeted with the star hack */
*background-image: url(mhtml:http://phpied.com/mhtml.css!somestring);
}

Data URI的好处是减少HTTP请求，坏处是浏览器对于URI的长度有限制以及增大了文档的大小。
相关链接：
生成Data URI的网址：
http://www.sveinbjorn.org/dataurlmaker
http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php

phpied-http://www.phpied.com/data-urls-what-are-they-and-how-to-use/
wikipedia-http://en.wikipedia.org/wiki/Data:_URI_scheme
hedger wang-http://www.hedgerwow.com/360/dhtml/base64-image/demo.php
dancewithnet-http://dancewithnet.com/2009/08/15/data-uri-mhtml/
chencheng-http://www.chencheng.org/blog/2009/10/28/data-uri-try/

2009/09/30CSS, HTML, Javascript/DHTML

0 Comments

关于IE6的那些破事

处理ie6问题的最好策略是修复它，那么该如何去修复ie6的这些问题呢？

【计划一下你的设计并且让他们简单一些】
如果你即将开始提前计划你的设计，请花一点时间考虑一下最好的编程方案，以便可以避免一些布局问题，即使是最复杂的视觉设计也可以通过简单的代码来实现，如果你发现你用了很复杂的Markup，你最好重新看一下你的设计方案。

【使用一个正确的Doctype】
用了一个不正确的Doctype或许会触发ie6的quirks mode并且让你的页面在各个浏览器之前渲染不一致。使用以下的doctypes: HTML 4.01 Strict, HTML 4.01 Frameset, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Frameset, XHTML 1.0 Transitional, or XHTML 1.1
例如：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

【使用渐进增强】
渐进增强简单的意思是对所有用户来说在增加光彩之前确保基本的功能可用，一般来说，渐进增强是指在没有javascript的情况下让互联网应用程序可以工作，通过使用javascript来增加动画、Ajax效果等等；但是说到ie6,渐进增强的另一个原则是使用ie6不支持的css3,html5以及其它网络协议。

【使用CSS Reset规则】
一个简单的reset

body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
【为ie6使用条件注释】
<!–[if IE6]>
<link rel=”stylesheet” href=”http://domain.tld/ie6.css”
media=”screen” />
<![endif]–>
css内的ie hack
/* target IE6 */
* html #selector { color: red; }
/* filter IE6 */
html>body #selector { color: red; }
#selector {
width: 200px !important; /* target other browsers */
width: 100px; /* target IE6 and lower */
}

【清除浮动】
.clearfix:after {
content: ” “;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix { display: block; }
/* End hide from IE-mac */

【IE的Javascript内存泄露】
由于ie使用它自己的内存管理，所以当操作javascript的时候没有收回内存时或许会产生内存泄露。
Douglas Crockford有一篇文章写了“preventing JavaScript memory leaks in Internet Explorer”.
Taobao Search&AD UED的元璋兄也曾经写了一篇通过try catch来防止ie的内存泄露的文章，看代码吧：
with mememory leak:
function createButton() {
      var obj = document.createElement(”button”);
      obj.innerHTML = “click me”;
      obj.onclick = function() {
        //handle onclick
      }
      obj.onmouseover = function() {
        //handle onmouseover
      }
      return obj;//return a object which has memory leak problem in IE6
    }
    var dButton = document.getElementsById(”d1″).appendChild(createButton());
    //skipped….
without mememory leak:
/**
     * Use the try … finally statement to resolve the memory leak issue
     */
    function createButton() {
      var obj = document.createElement(”button”);
      obj.innerHTML = “click me”;
      obj.onclick = function() {
        //handle onclick
      }
      obj.onmouseover = function() {
        //handle onmouseover
      }
      //this helps to fix the memory leak issue
      try {
        return obj;
      } finally {
        obj = null;
      }
    }
    var dButton = document.getElementsById(”d1″).appendChild(createButton());
    //skipped….

引入了finally声明，finnally声明定义了一段语句，这段语句将总是在try语句块后执行完成后来执行。通过这个就可以避免内存泄露，很奇怪吧~

2009/09/13CSS

7 Comments

关于IE的bug(CSS)

在开发中我们常会在ie中遇到很多莫名的bug，尤其是ie6这个早就该退出历史的浏览器。刚刚在haslayout.net上看到有总结ie的一些bug，分享一下。

1.图片label bug，影响版本ie6/ie7/ie8，当label中有img的时候无法触发点击选中form元素事件.

demo http://haslayout.net/demos/Image-Label-Focus-Bug-Demo.html

fix demo http://haslayout.net/demos/Image-Label-Focus-Bug-Fixed-Demo-CMS.html

解决方案：通过给<label>内加入一个空的span标签，然后设置position:absolute；background:url(#); 设置label float:left; position:relative;overflow:hidden;就可以解决了

2.设置margin auto的button没有居中，影响版本ie8，ie8下，如果给像button这样的标签（如button input[type="button"] input[type="submit"]）设置{ display: block; margin-left: auto; margin-right: auto; }如果不设置宽度的话无法居中。

demo http://haslayout.net/demos/No-Auto-Margin-Center-on-Buttons-Inconsistency-Fixed-Demo-CS.html

解决方案：可以给button加上宽度，或是通过js，var buttons = document.getElementsByTagName(’button’); for ( var i = 0; i < buttons.length; i++ ) {

buttons[i].style.width = buttons[i].offsetWidth + ‘px’;

}

另一种解决方案：

<div>

<button>This button should be centered</button>

</div>

</div>

</div>

</form>

button, select, input {

display: block;

margin-left: auto;

margin-right: auto;

width: auto;

}

.ie_fix {

text-align: center;

}

.ie_fix input[type="submit"],

.ie_fix input[type="button"] {

display: inline-block;

}

<!–[if IE 8]>

button { display: table; }

</style>

<![endif]–>

给 input[type="button"] input[type="submit"]加上一个额外的标签，并设置display:inline-block;

并通过条件注释给ie8下设置button display:table;

3.不正确的浮动伸展布局，影响版本ie6/ie7，连续浮动的元素并且设置clear属性没法自动伸展

demo http://haslayout.net/demos/Incorrect-Float-Shrink-Wrap-Bug-Demo.html

fix demo http://haslayout.net/demos/Incorrect-Float-Shrink-Wrap-Bug-Fixed-Demo.html

解决方法：给连续浮动元素加一个span然后设置display:inline-block和display:block

4.文档滚动bug，影响版本ie6/ie7，不在html标签上设置overflow或许会影响到body上面的overflow

具体请看http://haslayout.net/css/Document-Scrollbars-Overflow-Inconsistency

5.连续浮动元素bug，影响版本ie6/ie7，http://haslayout.net/css/Float-Squeeze-Weird-Gap-Bug

6.连续浮动字符出现重复字符，影响版本ie6/ie7,http://haslayout.net/css/Float-Squeeze-Duplicate-Last-Character-Bug

这个和5的解决方案都差不多，5是通过加一个宽度，而这个是通过给浮动字符加一个position:relative;

7.空元素高度bug，影响版本ie6/ie7，有layout的空元素获得了高度

<div></div>div {

background: blue;

width: 100%; /* to give “layout” */

}

解决办法：

div {

height: 0;

overflow: hidden;

background: blue;

width: 100%; /* this is just what we originaly had as “layout” giver */

}

8.表单元素双margin bug,影响版本ie6/ie7,input和textarea或许会继承父元素的水平的margin

具体请看http://haslayout.net/css/Form-Control-Double-Margin-Bug

9.ie7的1px dotted 边框变成dashed边框的bug,影响版本ie7, 当设置了1px dotted边框后，有一个边框的宽度大于1px

的话其它为1px边框会变为dashed的样式，具体请看http://haslayout.net/css/IE7-1px-Dotted-Border-Appears-As-Dashed-Bug

10.overflow bug,影响版本ie6/ie7，当设置了overflow:hidden或auto的元素，如果子元素设置了相对定位，overflow就不起作用了，

表现的是visible的样式，解决方法是给父元素加一个position:relative;

11.ie7的坏的:hover 绝对定位bug，影响版本ie7, 当子元素设置了absolute并且通过设置left top 等来通过:hover时改变其显

示位置时将会不起作用如果他们不再父元素的可视范围内，解决方法是给其加上margin-left:0%;

12.当:active时Button背景偏移，影响版本ie8，给button设置:active时背景会做偏移，可以通过设置:active时的-ms-background-position-x和-ms-background-position-y来改变这个偏移。

13.:hover边框消失bug，影响版本ie8, 当设置了outline的元素后，再设置:hover的时候，如果设置边框的话，将会不显示

14.百分比padding垂直margin bug，影响版本ie8,当父元素设置了百分比的padding，子元素有垂直的margin的时候，

就好像父元素被设置了margin一样，解决方法是给父元素加一个overflow:hidden/auto

15.待续…

2009/08/24CSS

1 Comments

熟悉高级CSS选择器

1.属性选择器

[att=value]
The attribute has to have the exact value specified.
[att~=value]
The attribute’s value needs to be a whitespace separated list of words (for example, class=”title featured home”), and one of the words is exactly the specified value.
[att|=value]
The attribute’s value is exactly “value” or starts with the word “value” and is immediately followed by “-”, so it would be “value-”.
[att^=value]
The attribute’s value starts with the specified value.
[att$=value]
The attribute’s value ends with the specified value.
[att*=value]
The attribute’s value contains the specified value. 继续阅读 »

2009/06/18CSS

0 Comments

用CSS3让你的网站达到更高水平

css被引入已经有13年之久，而广泛被采用的css2也已经存在了11年了。而我们还在用一些css hack以及javascript的技术来装饰网站。为什么我们不尝试在现代浏览器中去使用拥有丰富特点的css3呢？下面就来介绍一下css3的一些特性吧。

使用浏览器指定属性
因为有一些属性可能并不是w3c推荐的，所以采用浏览器指定的属性可以同标准的属性区分开来，从而在特定的浏览器取得特定的效果。最常用的扩展有：基于Webkit浏览器(例如Safari)以-webkit-开头，基于Gecko浏览器(例如Firefox)以-moz-开头，Konqueror(-khtml-), Opera(-o-)以及IE(-ms-)。

1.Selectors—选择器
属性选择器—三种新的属性选择器

[att^="value"]
匹配att属性以value开头的元素
[att$="value"]
匹配att属性以value结尾的元素
[att*="value"]
匹配att属性中含有value的元素
浏览器支持：ie6除外
混合选择器
exp:
div~img { border: 1px solid #ccc; }
选择div相邻的img元素，然后给img设置灰边
浏览器支持：ie6除外

继续阅读 »

Hi, I’m Adam Lu.

适当使用CSS3，让你的设计/开发提前进入下一个高度

开发当中遇到的CSS问题

关于IE的bug(CSS)-续

WebRebuild大会演讲《揭秘HTML5和CSS3》分享

HTML5

HTML5新增和移除的元素

HTML5对表单的支持

HTML5 DOM变化

HTML5的Javascript APIs

CSS3

CSS3在选择器上面的支持

CSS3在样式上的支持

CSS3对于动画的支持

那我们在开发中该如何去用CSS3呢？

那些不常用的css

用Data URI Scheme嵌入内联图像

关于IE6的那些破事

关于IE的bug(CSS)

熟悉高级CSS选择器

用CSS3让你的网站达到更高水平

最新日志

最新评论

日志存档

标签云

F2E Blog

Friends

Google Connect

博客管理