对于页面的设计一直以来，前端开发与设计师的磨合都是一个问题，设计出来的东西是不是一定要完全与设计稿一样呢？设计稿是不是也要计算呢？设计师是把设计完后的东西直接给开发吗？开发难道还要为不完全的设计做最后的调整与修饰吗？ 既然我们已经做了这么多的项目，那有一些经验我觉得还是值得跟大家分享一下。 关于设计 对于大多数网页设计师来说，设计可能就像平面设计一样，排版，调色即可。但是这里我要说一下网页设计与平面设计有非常大的不同，其中最不同的一点就是，网页设计是有精度的，不仅仅要对大版面考虑精度，对于细节同样需要考虑。甚至是文字的使用与字体大小 ，行距等。 其中的计算我在以前的文章中都有介绍。 前端开发手册之设计篇 里面详细的讲解了关于字体与设计时应该计算分格的问题。 前端MVC – PSD设计篇 里面也同样讲解了关于PSD转HTML时应该注意的问题。 我这里以GlobalMakret Web Design 2011为实例，这是设计稿（已经去除辅助线与标尺）： 关于前端开发 在完美的设计之后，就到了实践的步骤，让设计稿动起来。 在这里首先要说一下，关于字体的差异，在PSD转HTML时一大问题就是字体不能完全转换，因为浏览器渲染的问题，不同的浏览器里对字体的渲染并不相同。所以这在设计时同样需要考虑的问题。 先看图，开发后的HTML页面（Win7 Firefox3.6 截图）： 可以看到Win7对于字体的渲染效果还是非常不错的，由于使用了ClearType技术，对字体的渲染几乎可以达到PS里的锐利效果（对于IE效果会更好些，IE对字体的渲染一直都不错）。 重叠 设计就让他完美的去实现，这才是我们的目的，不然设计师费了那么大的力气设计的作品就这样被糟蹋了肯定会骂娘的~ 这是把两加图（设计稿与浏览器截图）重叠后的效果图，从图可以看到，图片是肯定可以Perfect Pixels！但是文字的确非常难，但是我们也一定要至少保证首字母是应该重合的或者差不多重合，由其是行距，这行关键，因为设计就在于这几PX的版本中，如果这都无法保证，那就相当于没有设计一样！ 问题 图中依然可以看到有些问题的存在，就是更改，在设计时由于不能把信息提供的准确，而最终导致终稿与实现的还是有差异，不要小看这一点点差异，对于精益求精的我们来说，是非常难以忍受的，因为很可能这样就没有辅助色，或者没有了中灰色！或者由于格的间距发生变化，留白就会了现差异，这就严重的影响了视觉效果。 在现在来说，在设计之初提供的东西非常有限，都喜欢做完后再添加东西。这点要在平时尽量的去灌输思想，并且在实践中让大家更默契才能减少问题的发生。优质的产品是源于团队的默契！ （由于XP对字体的渲染与Win7相差比较大，所以在XP下不开户ClearType，只能保证80%的相似度。） 后计 设计一定要将他完美的实现，实现一定要更精确！ 所有简单的事情，把它做的精细就是完美。 有相关问题欢迎与我讨论联系方式 YSjia

在IE6与7上最经常遇到的就是z-index无效。 一般来讲，ie对父级的要求比较高，如果父级有position属性，但是没有给z-index属性，那默认都是0，所以不论子集里面有多高的z-index属性，都是没用的。 所以一般情况下，需要给包含z-index属性的父级一个z-index:1的属性，这样可以解决很多莫名其妙的问题。 这样虽然简单的层级问题可以解决，但是如上图，同级之间的层级问题又出现，相同层级的同辈元素z-index属性下面的比上面的高。 这种问题一般都出现在制作下拉菜单时比较常见。 解决方法与上面一样，需要给当前较高的z-index属性。 题外话：这种下拉菜单虽然比较好用，但是兼容性其实比较差，而且嵌套的层次比较多。 对于复杂的DOM模型在不同的浏览器下差异还是挺大的。所以尽量简化用新的结构可能更适合。

对于小于0.6px左右的边框，chrome无法识别。 今天接到一个问题一个Table在其他浏览器里面正常而在Chrome下出现问题。 测试浏览器为 Chrome 5.0.342.8beta Firefox 3.6.8 IE6/8 Opera 10.51 一般情况下，只要border属性小于1px时，浏览器都会自动为其校正为1px。 Firefox 3.6.8下0.009px以下都认为是0 Chrome 5.0.3在0.6px以下都认为是0 这个算法是如何的，希望哪位明白的大虾讲解一下~

最近在研究Air桌面程序，准备用Ajax桌面开发套路来试试。 其他都没什么，很顺利，但是到CSS样式时却头疼的很。（当然要比适应IE6好很多很多） 这个“头疼”其实不是什么大碍，只是一些常用的CSS属性得不到支持。 比如：box-shadow text-shadow 但是一些非常特殊的属性还支持： 如：-webkit-transform 这是一个Webkit还在研发的属性，竟然都支持。 所以说Air很太狠了，说是支持HTML与CSS但是却没有一个总的列表，只是给了一个链接，说是支持一些Webkit的属性，但是有些不支持。 这里的有些范围可就大了去了。 所以说Air不够厚道。 在Adobe的交流地方，一位兄弟说出了我的心声 I was wondering if support for the other css webkit extensions that aren’t listed here will be coming? It may be a small thing but I don’t understand why text-shadow couldn’t be supported. Any thoughts 除了上面的一些CSS 3的属性不支持外，几乎CSS 2还是都支持的由其是text-overflow的支持，让我们省了不少事。但是感觉支持的不是很好，当鼠标先中后，后面的字还是会出来，由其是带圆角的时候。 而对于Webkit的很多私有属性其实都是不支持的，包括他自己列出来的一些，幸好虽然不支持CSS 3的border-radius但是支持-webkit-border-radius也算是一大幸事。 现在Air 2 beta已经出炉，居说会完全支持CSS [...]

两个比较实用的CSS在线工具。   CSS校验工具： 可以检验CSS文档里面的CSS哪些是没有用到的。 http://services.immike.net/css-checker/   CSS格式化： 可以把CSS按Class与SupClass排列，并且可以按字母顺序排列。 http://styleneat.com/index.php

什么是伪类？ 伪类：伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容；原则上特征是不可以从文档树上推断得到的。 伪类有：:first-child:link:vistited:hover:active:focus:lang 什么是伪元素？ 伪元素：伪元素是创造关于文档语言能够指定的文档树之外的抽象。 伪元素有：:first-line:first-letter:before:after 两者可以说都是一种CSS的规则，可以很方便的使用，但是其中却有一点让人很是疑惑，就是其CSS权重 伪类的的权重是10，这点大家都没有什么异议。但是伪元素的权重是1这点可能会有些歧义 e.g. <p id=’t'>this is text for test,Yse just for test</p> p#t{ color:blue; } p:first-line{ font-size:300%; color:yellow; } 按权重算，p#t应该是101，p:first-line应该是2 但是在浏览器一看，第一行却是黄色！这是为什么呢？ 原来伪元素是创造关于文档语言，这点需要详细的理解一个其含义 其实就是相当于这样 e.g. <p id=’t'><P:first-line>this is text for test,Yse just for test</P:first-line></p> 很是有意思的规则，并且关于CSS的版本不同，表现的形式也将不同。更多详解请看W3C Selector pseudo-elements

对于CSS的权重一直以来可以说都是含糊不清的，这个并不是因为大家对其理解有误，而是W3C在CSS2.0的声明来看的确很含糊，但是在CSS2.1里W3C已经对CSS的权重有了明确的规定。 Media type and element match Importance and origin in ascending order of importance (confusingly): user agent style sheets user normal style sheets author normal style sheets author important style sheets user important style sheets Specificity Source order 这里其实一个比较重要的就是“Specificity ” 什么是Specificity？ 简单来讲就是一个权重的表达方式：如0,0,0,0。这种表达方法是一种纸牌游戏的表达方法。 更详细的内容请查看这里 所有的权重方法都将依靠他来计算（!important除外）。掌握其特有的特点，将是你对CSS权重理解的一个重要的基石。 我们可以把他简化一下，如下表： 1 * { } 0 2 li { } 1 [...]

什么是浮动(floats)？ 当该属性不等于 none 引起对象浮动时，对象将被视作块对象( block-level )，即 display 属性等于 block 。也就是说，浮动对象的 display 属性将被忽略。跟随浮动对象的对象将移动到浮动对象的位置。浮动对象会向左或向右移动直到遇到边框( border 、内补丁( padding 、外补丁( margin 或者另一个块对象( block-level )为止。在IE5+中， div 和 span 对象假如没有指定宽度会被分配默认的宽度，而在此前的浏览器版本中则必须指定宽度值才可以呈递此属性。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 styleFloat 。 浮动(floats)有何用？ 浮动可以说是为排版旦生的。如页面排版和图文排版，后者大家可能更清楚。MS Office最被人认同与最高使用的就是排版，其理论上与此相同，但是实现更为复杂。 （图片来自w3c.org） e.g. style: IMG { float: left } BODY, P, IMG { margin: 2em } HTML: <p><img alt=”This image will illustrate floats” src=”img.gif” /> [...]