Bug 1 table col属性宽度值并不计算Padding所以有Padding的td或th其宽度不等于col的值 解决办法，不要给td或th padding值，或统一值即可。一般出现情况为可拖动的表格。 input的边框，默认是有四边框，即额外4个像素，但是使用border:none即不能消除边框，必须添加border-width: 0才可以让边框消失。 parent div haslayout then child input will inherit wrong margin from parent. http://blog.netscraps.com/bugs/ie6-ie7-margin-inheritance-bug.html Bug 2 table col 为隐藏时，其对应的栏（column）宽度与属性并不会随之消失，反而会应用到另一个栏（column）上。 解决办法，把col直接移除，重新排列。 这种情况一般发生在表格栏的隐藏与显示上（table column display hide or show）.

对于页面的设计一直以来，前端开发与设计师的磨合都是一个问题，设计出来的东西是不是一定要完全与设计稿一样呢？设计稿是不是也要计算呢？设计师是把设计完后的东西直接给开发吗？开发难道还要为不完全的设计做最后的调整与修饰吗？ 既然我们已经做了这么多的项目，那有一些经验我觉得还是值得跟大家分享一下。 关于设计 对于大多数网页设计师来说，设计可能就像平面设计一样，排版，调色即可。但是这里我要说一下网页设计与平面设计有非常大的不同，其中最不同的一点就是，网页设计是有精度的，不仅仅要对大版面考虑精度，对于细节同样需要考虑。甚至是文字的使用与字体大小 ，行距等。 其中的计算我在以前的文章中都有介绍。 前端开发手册之设计篇 里面详细的讲解了关于字体与设计时应该计算分格的问题。 前端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

对于Block与Inline级的元素经常会混在一起，现在就梳理一下这些元素： 对于Block级的元素来说，通常会在渲染时（rendered）会新起一行，以下元素是基础Block级元素： ADDRESS – Address BLOCKQUOTE – Block quotation CENTER – Centered block DIR – Directory list DIV – Generic block-level container DL – Definition list FIELDSET – Form control group FORM – Interactive form H1 – Level-one heading H2 – Level-two heading H3 – Level-three heading H4 – Level-four heading H5 – Level-five heading [...]