一些收获

总算把“布局和表现分离”这一思路落实到了云影的Blog上。这几天研究下来，还是有些收获的。

在兼容性方面，应该优先考虑更规范的浏览器。在IE和Firefox之间，更规范的当然就是后者了。所以大部分调试工作应该放在Firefox当中，而不是IE当中进行。

多层背景的放置，有一个小技巧。首先，与内容无关的图片，按WEB规范应该做成背景图，而这并不光是规范问题，把图片做成背景还非常有利于定位。
我在云影的Blog里就是这样做的，有一层真正的页面背景，还有一层背景其实是顶部的Banner。最初我是把页面背景放在body标记里面、居中，而Banner是放在一个Headbox的div层里面、居中。
问题就出现了——在Firefox里面看，一切正常，但在IE里面，Banner比预想的位置偏左了1px！如果把body的左边距设成1px，那么在IE里面看上去就正常了，但在Firefox里面，Banner又会向右偏1px。
基于上面的“在兼容性方面，应该优先考虑更规范的浏览器。”，可以判定这是IE的Bug！但仍然要解决这个问题。
同时，这样的布局还带来别的问题——如果浏览器窗口缩小，在Firefox里面毫无问题，上下两层图片对应的位置保持不变；而在IE里面，body里面的背景边上却会出现一段未曾预料的边距。糟糕的IE！
如何解决？其实不难想到——把页面背景从body里面拿出来放在页面最外层那个定位容器里面就好。于是以上两个问题：偏移和边距，都解决了。

云影的Blog是放在Blogcn的。这是一家极其糟糕的Blog提供商，技术方面乏善可陈。但抱怨归抱怨，问题还是要解决。我在做这个“布局与表现分离”的过程中，遇到最大的问题就是Blogcn的标记兼容性太差。

模板里面没法放!DOCTYPE声明。
这样的后果就是没法让IE和Firefox对BOX的解释取得一致。在没有适当的!DOCTYPE声明时，IE里面的BOX尺寸是含边框、内边距在内的，而按WEB规范，这样是错误的。
那么如何在没有!DOCTYPE声明的情况下，让IE听话一点呢？我想到一个办法：嵌套DIV，让两层div的边框和内边距均为0，而内层div的外边距就充当了如果使用单层DIV时的内边距。
因为这两层DIV当中，边框和内边距都为0，所以不管浏览器加不加这两个尺寸，都没影响了。

这个技巧附带的好处是：在保持布局跨浏览器的兼容性的同时，可以使用一些IE特殊的属性，比如滚动条的自定义。按规范不应当这样做，但其实这样也满有趣。

对于嵌套DIV情况下，如何让外层DIV的高度自适应内层DIV，网上的论述很多了。就是让内层DIV具有float属性，成为浮动层，并在下边加上一个控制DIV，具有clear:both属性。
综合一下，还应该加上两条：
浮动层还应该具有display:inline;属性，以解决IE莫明其妙的边框加倍问题；
控制层为了不影响布局，可以把height、font-size和line-height设为0。

有一个调试中的技巧，可能大部分coder早就在用了，不过对我来说还是一个新的收获，因为毕竟以前还没有切实、全面地采用DIV+CSS。
具体做法是在调试时把各个DIV都加上“border:1px solid #color;”这样的属性。很简单，但很有效。

最后，我发现采用DIV+CSS、布局与表现分离的思路，用文本编辑器来写网页其实更方便、更舒服了。