今天在看我博客的访问统计的时候，看到了一个比较熟悉的网址，就是帕兰映像的博客，遂点击链接过去看看，结果发现了一个非常非常值得收藏的文章，这篇文章总结了许许多多CSS(xHTML+CSS或称DIV+CSS)的技巧、教程及资源。其中也有很多值得我学习的知识，相信这些资源对大家来说也是非常值得收藏的，看过之后收获是一定滴！所以转载到自己的博客上跟大家分享一下，在这里先感谢帕兰映像的辛苦总结。值得高兴的是，这篇文章中也包含了很多彬Go以前发表过的一些CSS教程或资源等。各位读者瞪大眼睛准备好哦，以下是原文:

本文未完，点这儿看完整内容 » »

最近更新日期:2009年8月10日

2009年2月24日，Safari 4.0 beta版正式发布，Safari从它的3.2版本开始就已经支持所有的CSS选择器(包括最新的CSS3)。不过为了方便大家的工作，下面提供了最新版本的CSS选择器浏览器支持情况，其中包括最新的CSS3和Safari 4.0 Beta的支持情况。感谢Estelle Weyl的总结。
2009年6月30日，FireFox 3.5发布，类似Safari 3.1及更新的版本 (包括Safari 4 beta)，Opera 9.64 （及更新版本） 和 Google Chrome 都支持所有 CSS2.1 和 CSS3 选择器。以下是我对所有浏览器测试后的兼容性统计表，希望对大家有所帮助。
本文未完，点这儿看完整内容 » »

　　作为前端开发/网页设计师，电脑中总是安装着各种不同内核渲染引擎的浏览器，如IE(Internet Explorer)、FireFox、Safari、opera、Chrome等，在编写网页时要经常在不同的浏览器中进行测试，以便能在这些浏览器中有相同的显示效果。暴风彬彬曾经介绍过整合了IE5、IE6、IE7和IE8的浏览器IETester。今天暴风彬彬向大家推荐一款将FireFox、Safari和IE三大浏览器引擎整合在一起的浏览器:lunascape。

本文未完，点这儿看完整内容 » »

　　在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。

　　当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有一些都是以自己的方式去理解CSS规范，这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突，使得网页的样子在某些浏览器下能正确按照设计师的想法显示，但有些浏览器却并没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性问题。更糟的是，有的浏览器完全无视CSS的一些声明和属性。

　　正因为上述冲突和问题依然存在于这个”不完美的世界”，所以一些设计师想到了一种避免浏览器兼容性问题的方法，那就是CSS Reset，什么是CSS Reset？我们可以把它叫做CSS重设，也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。

　　今天暴风彬彬总结收集了15套CSS重设实例，您可以在前端开发工作中进行参考和使用，有些是很简化的CSS Reset，有些则是非常复杂非常全面的CSS Reset，至于使用哪套，全看您的爱好或需要。

　　彬Go会经常更新前端开发/网页设计等相关技术及教程文章，欢迎订阅本博客来及时浏览本博客的最新教程及资源。

一.最简化的CSS Reset(重设) :

* {
      padding: 0;
      margin: 0;
}

　　这是最普遍最简单的CSS重设，将所有元素的padding和margin值都设为0，可以避免一些浏览器在理解这两个属性默认值上的”分歧”。

* {
       padding: 0;
       margin: 0;
       border: 0;
}

　　这是在上一个重设的基础上添加了对border属性的重设，初始值为0的确能避免一些问题。

* {
       outline: 0;
       padding: 0;
       margin: 0;
       border: 0;
}

　　在前两个的基础上添加了outline属性的重设，防止一些冲突。

本文未完，点这儿看完整内容 » »

　　使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题，作为网页设计师或前端开发工程师，这个垂直居中问题也是必须掌握的技巧之一，一些互联网公司面试题中也会出现这类题目。今天暴风彬彬将分享一个完美通过CSS实现垂直居中的方法，该方法是由aka Yuhů发明的，这个方法也是目前暴风彬彬觉得最完美最简洁的CSS垂直居中实现方法。下面来看看暴风彬彬曾经总结的笔记，大家有不同意见请多拍砖:

先来看看实例效果Demo

本文未完，点这儿看完整内容 » »

　　我们提倡尽可能使用CSS，而且我们常常能做到这一点。现代浏览器有很好的CSS支持-这无疑足够好让你使用CSS来控制布局和版面设计。但是有时候，某些网页元素在不同的浏览器会出现不同。

　　如果你不知道原因，不要过于担心，请研究CSS规则并查看这篇文章:使用CSS来修正一切: 20 +常见错误和修复。

　　如果这些也无效，您可以通过下面列出的12个javascript解决方案修复它，这样您的网页看起来就能跨越所有浏览器了！

　　在本文中，我们会揭开你在开发web应用是可能会遇到的12个最常见的CSS问题的javascript解决方案。

本文未完，点这儿看完整内容 » »

以下CSS Hack适用于Google Chrome及Safari3.1浏览器，经过下面的代码定义，只有Google Chrome及Safari3.1浏览器中的段落文字才会显示为红色，因为：

1.网页仅仅有一个bady元素

2.仅仅这两个浏览器支持伪类nth-of-type()

3.body:nth-of-type(1) 将匹配唯一的那个body元素.

body:nth-of-type(1) p {
        color: #333333;
} 

关于Chrome对CSS的支持情况，请看这里

　　确切的讲它应该是最好的之一，因为还有一个浏览器也同样支持CSS选择器相当全面，那就是Apple的Safari3.1。虽然Google Chrome才发布三天，而且评价褒贬不一，但是他的技术、内核以及现在谈论的CSS支持确实是其他浏览器所无法比拟的，至少它的速度还没有多少人质疑过！

　　Google Chrome使用的是safari正在使用的引擎AppleWebKit，版本是525.13，而Safari3.1使用的是最新的版本525.18，具体有什么差别我也不太清楚。至少它们都支持CSS3选择器。

　　下面是 Engage 公司的前端开发工程师Estelle 测试整理的Google Chrome对CSS选择器的支持情况，并与其它浏览器进行了对比：

本文未完，点这儿看完整内容 » »

FF3出来有一段时间了，本站对此版本的FF也发布了几篇相关文章。针对FF3的CSS HACK好不容易找到。
MOZILLA 已经对FF所有 3.0一下版本实行了 更新3.0的推送。

大部分都是3.0了，以前的HACK又失效了。

下面的代码是最新的FF3的HACK。只有 FF3支持。呵呵

#hack, x:-moz-any-link, x:default {
/* Firefox 3 style here */
}

本文未完，点这儿看完整内容 » »

CSS兼容性问题一直被大家关注，而调试环境成为很多CSSer头疼的问题。如何在一台电脑中实现多个浏览器版本共存呢。

而今天向大家介绍一款新的工具IETester。这款工作个头不大，但是功能不小。它能模拟实现在IE5.5、IE6、IE7、 IE8.0环境下页面显示效果。包括HTML、CSS和JS的呈现。IETester支持XP和Vista系统，不过系统需要安装有IE7以上版本。

本文未完，点这儿看完整内容 » »