vertical-align属性可以说是CSS中兼容性最糟糕的属性之一了。比如说与文字相关的vertical-align属性,vertical- align:text-top;和vertical-align:text-bottom属性,这两个属性的解释IE浏览器(IE6-8)和现代浏览器是不一样的两个派别。到底哪种表现是正确的,这是不能随便做定论的。无论实现的机制如何,若能实现类似的效果表现,其实都可以说是正确的。在一般的使用条件下,例如小图标+文字,vertical-align:text-top这类文字对齐类属性在不同浏览器下的差异是较小的,这很难让我们去思考与理解这些差异在什么地方。但是,如果我们将测试的元素进行简化与放大,那么差异显而易见,也更利于我们思考其中的原因所在……
本文是我对CSS vertical-align属性深入思考后的一些心得体会,提供丰富飞截图,动画演示,以及必要的demo。希望讲的足够通俗易懂,能对您的学习有所帮助!
文章关键字 ‘IE6’
CSS vertical-align的深入理解(二)之text-top篇
2010年06月12日,星期六CSS border三角、圆角图形生成技术简介
2010年05月5日,星期三利用CSS的border属性可以生成一些图形,例如三角或是圆角。纯粹的CSS2的内容,没有兼容性的问题,我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理,以及实例。我觉得此技术相当实用的,故本文再次简单叙述一下,另外,本文还将展示可能并不为众人所知的CSS border圆角生成技术。
本文内容不多也不深,依旧提供丰富的截图演示。
让IE6/IE7/IE8浏览器支持CSS3属性
2010年04月27日,星期二本文将展示如果通过调用htc文件轻松让IE浏览器下也能实现一些CSS3的效果,例如盒阴影(box-shadow)、文字阴影(text-shadow)以及圆角边框(border-radius)效果。
本文提供详细的使用讲解,必要的demo页面,以及一些必要的说明,希望能对您的学习有所帮助。
CSS content内容生成技术以及应用
2010年04月9日,星期五本文讲解CSS content属性,这一属性您可能用的不多,关注的也不多,其根本原因就是IE6/IE7的不支持,但是,IE6/IE7的淘汰只是时间问题。实际上,CSS content属性是个非常强大的属性,其应用范围可能要比您之前认为的要广泛的多。本文就将针对这一属性从基本开始详细阐述,并列举一系列有代表性的应用,提供详尽的代码示例,效果截图以及demo页面,希望您对您的学习有所帮助。
区分IE8/IE7/IE6及其他浏览器-CSS “\9″hack
2010年04月4日,星期日纯CSS实现易拉罐3D滚动效果
2010年03月29日,星期一本文展示并讲解纯CSS实现的超炫超酷的易拉罐3D滚动效果,向您展示CSS的惊人潜力。效果简述为:横向移动滚动条,易拉罐随着滚动条的滚动,自身也进行着效果逼真的3D滚动。
本文提供丰富的插图以及必要的demo页面,希望能对您的学习有所帮助。
纯CSS实现各类气球泡泡对话框效果
2010年03月13日,星期六本文的知识点较多,内容也较多,展现了CSS惊人的力量,如果使用纯粹的CSS实现视觉良好,体验上佳的web界面。讲解了“字符法”以及“边框法”,丰富示例,逐层深入,非常细致的讲解了实现的原理,方法,代码,注意点等。
本文提供详尽的插图,丰富的按钮,提供详尽的demo,希望你对您有所帮助。
CSS实现兼容性的渐变、高光等文字效果
2010年03月12日,星期五
对于很多网站的大标题都是有一定的文字效果的,比如渐变就是常用的效果,而这些效果往往都是由世界上最厉害的美容产品photoshop做出来的,一个效果就是一张图片,所以,要是要10个不同的文字标题,可能就要制作十张带有渐变效果的文字图片了。
而实际上,无需使用多张photoshop图片,只要一张小小的图片在配合CSS就能实现各个文字内容的渐变效果。
本文就将展示如何使用CSS,配合一张小小的图片实现文字的各种上佳的效果,没有JavaScript,没有flash,纯粹的CSS,兼容各个浏览器,Firefox,chrome,Safari,甚至已经被微软做了葬礼的IE6也可以降服。
IE6下z-index犯癫不起作用bug的初步研究
2009年12月24日,星期四CSS中,z-index是个内容繁多,牵连甚广的知识点,CSS手册中的那点知识那就是冰山一角。如果深入研究,牵涉到border及background的堆叠模型,同级显示问题,同级牵连显示问题,以及浏览器处理显示的机制等,我可能表述有些含糊,但确确实实z-index蕴含着很深的知识点。
我在z-index的研究上面的功夫还不够,所以一些深入的东西我是没有信心讲好的。不过本篇文章可以说是做了个不错的表面功夫,详细的阐述了IE6下两个常见的z-index层级bug,有理有据,一步步细致分析,提供代码演示,提供demo页面,希望对您的学习能有所帮助。
checkbox复选框的一些深入研究与理解
2009年12月23日,星期三本文可以说是一篇针对checkbox复选框不错的文章。前半部分针对复选框在不同浏览器下的表现进行了深入的研究与思考,揭示了产生差异的原因,让我们可以更轻松的处理复选框的样式表现,后半部分只要演示了一些关于复选框的常见JavaScript操作,例如如何判定复选框是否被选中,如何判定复选框组是否被选中,以及复选框的全选反选的实现等。
整片文章提供详细的视图,提供必须的代码演示。另外JavaScript部分提供demo实例页面,希望对您有所帮助。