远去的记录点（四）

系列连载四

整理一下制作过程的心得，虽然不值一提（网络上的老古董），但毕竟是自己的一个总结（高手就不要看了）。

（1）原本的主题整体结构是流式布局（也就是布局会自动扩展和适应浏览器窗口的宽度），且文章栏在左边。改为文章栏在中间，两栏浮动左右后，麻烦就来了，中间栏如果有固定宽度的图片，那浏览器不是最大化时，中间栏就会被挤下去。虽然一般开浏览器都会最大化，但总觉得心里不舒服。

就算固定了中间栏的宽度，还是不行？中间栏及右侧栏采用绝对定位倒是解决了麻烦，但footer就变成固定浮动在屏幕下方，相当于无视中间栏……

解决方法：改为固定宽度布局，一个大框套住三栏，全部float:left。

（2）IE6 bug

还记得以前刚装IE6的时候，感叹其界面图标都变漂亮了，用起来蛮开心的。可现在开始计较起CSS后，就对其深恶痛绝（果然立场决定一切）。IE7下一切正常的网页，到了IE6下则变得面目全非。

a. float双倍margin bug

只要对div元素设置了float和与float相同方向的margin值,则在IE6下表现为margin值*2。

解决方法：在后面加一句display:inline即可。

现在布鲁已经养成习惯，一碰到float和margin在一起，则自动加一句display……

b. 定义一个div，里面只放了背景图片，却发现和下面的div中间空了一段距离。

解决方法：font-size:0px;line-height:1;

原来IE6下默认font-size:12px;？

c. a:hover bug

如果a:hover 中没有样式的改变，即和a 定义是一样的，hover就不会被触发。

解决办法：在a:hover{}增加一些特定的属性，例如a:hover{border:none;}。text-decoration，color，z-index不能触发显示？网上也有用JS等实现IE6不支持非a标签下hover伪类的方法。

还有布鲁用的插件在IE6下hover效果不显现，不知和这有没有关系（－|－）

d. 不支持PNG透明背底

解决办法：加个filter或用JS。

布鲁嫌麻烦，都改成用gif了，虽然网上说会有锯齿，不过布鲁需要用的背景透明的图片都不大，就一个一个像素修正了，还有用背景色替换的方法，哈哈（－|－）

e. padding下width计算

似乎有padding时，IE6的width计算不同。

解决办法：布鲁尽量不用padding，多用div套起来，用margin（－|－）

f. break-all

在用word-wrap:break-all;时，IE6下虽然输出被打断，但莫名其妙地内容还是撑破外框。

解决方法：针对IE6的width调小，这样输出内容撑大后，外框仍正常^_^

网上还有很多IE6的bug，还好布鲁就碰到这些～～～

（3）FF,IE6,IE7兼容

到了自己动手，布鲁才第一次知道网页设计有浏览器兼容问题（－|－），才深深体会到网页设计者们的痛苦……为表达同一显示效果，竟然是这么的难……知道这个字怎么写还不够，还要懂得用毛笔用钢笔甚至用凿子怎么写……

a. 网上hack的方法很多，布鲁喜欢用"*"和"_"

如 margin:5px;*margin:7px;_margin:10px;这样FF认为是5px，因为后面的符号它都不认识，同理IE7认为是7px，IE6认为是10px。

b. 个人感觉IE比较“活”，FF比较“死”，这里说的“死”是指FF比较忠实于CSS标准。有时候写完一段代码，在IE下好好的，FF下却出错了，使得布鲁有段时间很烦FF。不过后来发现凡是FF下出错的都是css写得不过关所致。相反IE却投机了，聪明地认为你上面这么写了，下面的思路也是一样的，就这样替你给包容了，不需你再重定义。比如三行顺列float，FF中一定都要加float。

c. 11px的宋体在FF下真是难看啊。

d. FF不支持word-break:break-all;只好用overflow:hidden；了。

e. 当用list-style:circle outside url(images/*.gif);的形式时，IE中的图片在一行中总是偏上？不能和文字处在同一高度。FF则近似同高。布鲁不知问题出在哪，后来就把图片上方用空白色素填充，相当于把图片拉高了，这样IE下就表现很完美了。但FF又不行了，拉高的图片把行距给撑大了。布鲁只好用两套图标（－|－）。还有个问题FF中图片和文字间隔比IE大，看起来较不美观。

f. 下划线也很奇怪，IE下都给你用一样粗细的，但FF中的下划线会随你文字变大而变粗。IE中过大的字可能伸出下划线，FF中却很规矩。

g. php中的style引用list-style:circle outside url(<?php bloginfo(’stylesheet_directory’); ?> /images/*.gif);的形式，在FF下无效？

h. 用空的DIV占据空间来进行排版时，定义宽度后，FF正常，IE6中div高度指定不了，IE7中与下面div总有个间距。令div font-size:0;line-height:1;则IE6也正常。但IE7仍解决不了。后来找到解决办法，令div width:100%;overflow:hidden;一切OK。

还有其他的吧，还好布鲁就碰到这些～～～

（4）整图片

布鲁不懂得太多PS技巧，photoshop只会用铅笔，简单渐变，仿制图章什么的。其他一些小工具倒挺好用的：比如用CoralSpy抓取颜色，Photomix合并图片，Hypersnap修剪图片，颜色置换处理背景图片……