文章关键字 ‘Firefox’

CSS3&HTML5各浏览器支持情况一览表

2010年04月2日,星期五

正如题目所显示的,本文展示的内容是CSS3&HTML5各浏览器支持情况一览表,方便您的查阅。其他的话语就不多说了,会定时更新,希望能对您的学习有所帮助。

阅读全文…

页面可用性之outline轮廓外框的一些研究

2010年01月4日,星期一

在IE以及Firefox浏览器下,默认情况下,点击链接文字或图片(特指a标签下的)。会留下一个轮廓框。就我个人而言,对于链接点击后留下的轮廓框,我都是采取无视的态度,因为权衡来讲,对链接轮廓框大动干戈麻烦大于好处。但是网站千差万别,总有需要解决这类虚框的时候。

目前网上或设计师工程师常用的方法就是设置…,此方法确实有效,或是由于跟风,或是由于没有深入思考,或是根本没有必要想那么多,此方法会大大降低页面的可用性…

阅读全文…

CSS3 transition实现超酷图片墙动画效果

2009年12月30日,星期三

最终的图片墙效果
CSS3是个新东西,也是个好东西,不过以往用CSS并没有让自己兴奋。比如圆角,文字投影等就的CSS也可以实现,就是多一些标签而已。但是,今天,对CSS3 transition过渡的学习真正让我兴奋了一把。因为我见到了我以前没有见到过的东西,简单的几行CSS代码实现了flash都不容易实现的炫酷效果。本文就将展示一下使用CSS3 transition实现的炫酷图片墙图片旋转悬浮效果,文章由浅入深,循序渐进,提供详尽的代码讲解以及相应的demo实例页面,相信会对您了解CSS3的一些特性有所帮助的。

阅读全文…

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实例页面,希望对您有所帮助。

阅读全文…

翻译-IE7/8@font-face嵌入字体与文字平滑

2009年12月13日,星期日

这是一篇翻译的文章。主要内容如下:使用@font-font调用字体进行文字渲染的时候,IE7和IE8浏览器下的文字会有丑陋的锯齿,本篇文章就是讲为什么会有锯齿,如何解决这个问题。文章含有详细的demo页面,还有相应的jQuery插件方面解决这一问题。虽然,我们平时很少遇到这一问题,但是了解也是很重要的。
翻译水平有限,如果有不足之处欢迎指正。希望对您的学习有所帮助。

阅读全文…

关于Google圆角高光高宽自适应按钮及其拓展

2009年10月24日,星期六

谷歌gmail邮箱中出现的圆角高宽自适应按钮
本文以Google圆角高光高宽自适应按钮为引子,阐述此貌似平常的按钮后面的强大技术,并提供我经过我反复试验的更加优化高效的css实现方法,并对其优点进行分析。然后进一步扩展,探讨Google在css技术应用以及网页产品开发上的思想意识,强调应该有将css扩展性重用性发挥到极致的意识。并通过将虾米网图片按钮转换为效果一致的css按钮这个实例进一步验证培养css重用性可扩展性意识的重要性。本文不仅仅是讲解如何通过高效的css实现一些貌似只有图片才能实现的效果,更重要的是要传达Google在产品设计在技术运用上所体现的一种思想,传达Google是如何将产品的扩展性预见性运用到极致的,借以希望你我都能从众领悟到一些东西,然后在前端这块领域有所作为。
本文提供技术实现代码以及demo实例页面,希望对您有所帮助。

阅读全文…

鲜为人知的一个解决兼容性问题的利器——小数

2009年09月12日,星期六

说到解决兼容性问题,不得不提一下css hack,曾几何时我以会使用几个hack沾沾自喜,后来发现自己真是个vip级别的蠢蛋,会用几个hack只是中级阶段,真正厉害的人要以没有hack同样可以实现复杂页面的兼容性,这才叫厉害。

这里将介绍一个很有趣的您应该没有见过的解决某些兼容性问题的神奇的一招——使用小数值。小数值像素在不同浏览器下的解析是有差异的,但是这种差异一旦用到点子上,乖乖,可以反而用来解决兼容性问题。正所谓一物降一物啊。

本文将由浅到浅,就是很浅显的讲解这个平时很不受注意的现象与方法。提供实例页面,希望能对您有所帮助

阅读全文…

大小不固定的图片、多行文字的水平垂直居中

2009年08月28日,星期五

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。
关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法,用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额外标签;需要记住一些比例参数,上手较难;原理艰深,兼容性不稳定等。但是在我看来,这个方法不足够好!本文将提供两种更为新颖的方法,代码简洁,原理简单,上手容易,兼容性强,出错率低的方法。
css是如此的精深,我相信后来人会有更加绝妙的方法。但是,本文提供的几种实现图片垂直居中方法,一定是目前最实用的几种方法。一起来一睹为快吧!

阅读全文…