问题可以看这个帖子：
http://bbs.blueidea.com/viewthread.php?tid=2892084&page=1&extra=page%3D1
遇到的问题截图：

在IE6中是有问题的，IE7未测试，FF下是可以显示的。
具体的解决方案就是在浮动的层上，给层设置一下height:100%或者zoom:1;

这段日子在制作页面时，使用了一种新的写法来混排了图片，文字，列表，觉得不错，放到博客上面，和大家分享一下。
先看一下图片

混排的样式大致就是这个样式。

查看全文 »

虽然写了很多的标准布局，写了很多的css，但是觉得自己还是很粗糙 , 并不能达到灵活多变，shiningRay 推荐了 Mollio 给我 。

Mollio CSS/HTML Templates

学习Mollio , 一来是学习一下成熟多变的css的写法，二来是看一下Mollio给出了Styleguide (PDF) ，并尝试制作一份项目的Styleguide。

以下我总结了我眼中Mollio的几个对我有帮助的技巧(会不断更新):

1. 给”big div” 添加 ” position:relative; ” (这个的好处是大大减少了float和clear的使用)

2. div中尽量自上而下写大小,避免不规则的margin,padding (例如: header{margin-bottom:5},content{margin-bottom:10px;footer{ margin-bottom:0;})

3. form中可以尝试 <label for=”input-1″><span>用户名</span><input type=”text” name=”input-1″/><br /></label>作为一行 (这个方式我觉得很好，<span><input> float:left; , <br/>清楚浮动)

4. form中使用fieldset会比div更有魅力~~

5. 连接标签为 More ，的优化可以这样, <a href=”#” title=”这是混乱八小时的连接” >More<span>这是混乱八小时的连接</span></a>  ( span {left:-9999px; position:absolute; width:900px;} )

6. ol中的序列数字的大小是根据li里面的字体的大小调整的

最近正在做首页，处理很棘手的浏览器兼容的问题，主要调试的浏览器为 IE6 ,IE7 ,FF3 ,Opera9.5 ,Safari3.1.2

兼容浏览器是一种很费神的工作，和前期的页面设计也是很有关系的。如何合理设计出易制作，易维护，易扩展的页面可是非常具有水准的工作，这个可是我的努力目标，当然除了个人努力之外，还有点很直接的关系就是BOSS们是否肯花时间让你去分析目前网站的架构和布局，好了，话不多说了，应该谈谈我这些日子碰到的兼容性问题了。

我制作页面完成之后，首先的工作一定会是去检验下页面是否通过 w3c 和 css 的2个标准，当然，并不是说，一定要通过这个标准，其实去检测页面的目的应该是看一下自己写的页面，是否合理？是否有一些不合标准的标签的运用，这个对之后进行的工作有很大的帮助。

其次就是关于浏览器的兼容性问题了，关于这个什么浏览器为什么不能兼容我就不多提了，我就罗列一下，我常用的css hack吧，不考虑ie6以下版本了。。

各大浏览器独享hack

ie6： “_“下划线是它的独享，例如: _background-color:#000;

ie7： “+!important” 复杂了点，但是为了效果… ，例如: + background-color:#000 !important;

FF： “!important“,他和ie7有很多类似，如果想要区分开ie和FF,只要把FF的代码写在ie的前面即可（下面会写到） ，例如: background-color:#000 !important;

查看全文 »

做前端做的多了，难免碰到BUG，记得ie由一个很有名的多出一只猪的bug，我这几天又碰到了中英文混排的bug了。。

以下是相关文章(目前还是没有比较完美的解决方法)：

用CSS控制IE下中英文字体显示对齐

口碑网UED TEAM “网页中英文混排行高不等问题的解决方案探讨”