最近，PdM只知道打醬油，台北美工被炒了，上海美工休產假，PjM急得發瘋，就讓我們RD組把PRD和UIF都給圓了。然後RD這裡居然以前沒人是做過網站的，除了我。大家的本行要么是SI，要么是Linux，最多就是一年多的Android經驗。大家甚至都不知道CSS是什麼要怎麼寫。。。。。。
於是乎，現在整個前台都我一個人在做。。。（基於RoR，用著用著我就無比懷念NodeJS。。。這是病，得靐。）
好了，上面是廢話，下面開始敘述Bug。
如果你要讓你的頁面內容在一個Block裡不是置前顯示，因為前面可能有Border，貼著Border寫字不好看，你會怎麼做？
最簡單的方法，就是padding-left。
這是標準做法，人家給padding就是幹這事的。
或者，文藝一點，在一個block裡嵌套一個span或者div，然後讓這個sub-block設一個margin-left。
個人推薦不要這麼做，因為不管是webkit還是gecko，在佈局排版和繪製方面，都是循環式的。只要一個region非空，渲染引擎在佈局繪製的時候就會將它納入計算範圍，然後開始一個循環。這在UI元素少的時候沒什麼，但UI元素一多，特效一多，整個瀏覽器的FPS就會被拖累，而且事件響應也會受到影響，特別在D&D的時候（因為既有交互又要實時渲染）——前年我們給Linux做桌面的時候是HTML5+eWebKit+NodeJS，有過整整一個禮拜，我就是在精減頁面的層級結構。
然後，愉快的事情發生了。
我將幾個inline-block的div並排放置，設置width，設置padding-left，做成表格的樣子（為什麼不直接用表格？這是另一個故事）。一切本來都很美好，然後我就發現某一行的某一個格子比上下所有它行都寬了一個像素……於是邊界線就沒有對齊，不好看了。
徹查了半天，結果讓人驚喜——原來是因為padding-left導致的。
事實上，一個300px的div，設置5px的padding-left，總的寬度理論上是305。但在有內容的時候，卻實際上不是305px，用chrome查看的結果，絕大多數是306px，而那個出問題的行，變成了307px。
於是對齊不能。
不能用padding-left，考慮性能也最好不要嵌套block，解決方法就是設置text-indent，行縮進。
這當然不是正確的解決方法，因為行縮進其實只是收行縮進，多行的話直接就廢了。但好在在這個UI元素上，都是單行了，這個問題可以解決。
其實，寫這東西主要是想說：webkit的佈局存在紕漏。雖然沒有用GDB跟進去調查（放前年的話就跟進去了），但很顯然這貨是佈局系統的一個問題。
大家如果做一些比較特殊的佈局和特效的話，還是要注意一下這種猥瑣的小問題的。