这是一篇分析流文章，不是技术流。

问题：我们经常会碰到很多莫名其妙的样式bug，也许10个浏览器下，9个浏览器是好的。但是就有一个浏览器有问题。很多情况下，ie6/7出bug的几率比较大，当然解决办法也是很多，zIndex，双边距，末尾多一个字，等等都成为了耳熟能详的bug流派了。但是opera，firefox，safari下也会有bug，这个时候要是出了问题该怎么办呢。

一个opera的bug实例

我还是得说，我这里只是提供一个解决问题的流程，具体是什么什么原因导致的，就不做深入研究了。bug如下。

-------

-----

这个结构大家应该很熟悉了，很多情况下就是 ul>li*n 的样子。li往左float了。所有浏览器除了opera都显示正常。但是opera显示了以上效果。

连号走势 和 跨度走势 这两个li 为什么会在右边呢？明明是float左边的，应该是显示在左边啊！

分析流程，排除法

1。假如没有一手的开发代码，那先从线上另存为网页。看错误代码，如果能够有firebug这样的工具，能直接改代码的话就很方便了，但是现在没有。只能一步步来。

2。另写一个网页，做一个纯粹的，ul>li*n结构的页面，放在opera下看效果。发现，纯粹的这个结构下，没有上面的问题。也就是说这个模型没有问题，必然是这个模型里加了一些未知的样式导致的。

3。看源代码中结构是否复杂，如果太复杂的话不好分析，所以去掉一些元素，使其只剩下ul>li*n这样的纯粹结构。删除了其他元素，只剩下ul，li的样式。相同的结构，该清理的东西都清理掉了。发现ul和li上没有重叠的样式。但是还是存在问题。这很让人纳闷。

4。这个时候我就考虑到了2个东西，一个是dtd声明，还有就是引入的公共css中的reset。

5。于是先查看一reset里的css呢，我一下子就想到了字体，而不是font-size或者line-height。因为经验，我曾经就几次因为字体问题出现过这样莫名其妙bug问题。于是修改了一下字体，发现OK了。

6。这个时候已经明白是字体导致的，于是百度一下这个字体，找到了这篇文章，说是中英文高度不一致引起的。

7。再查看一下dtd，为什么我会想到的是dtd声明会出错呢？因为经验，我以前也碰到因为dtd声明错误导致的问题。于是我修改了dtd，发现也OK了。

最后得到结果：

Tahoma这个字体，在中文和数字等混合排版的时候，会导致了中文和数字的line-height不一致，从而导致最终的高度不一致。

从而导致了上面连号走势被挤到除3余数的后面了.

解决办法就很明白了。因为是字体高度引起的。所以

第1个办法：换个高度相同的字体，用宋体就没有问题了。

第2个办法：限定高度。设置height后，也没有问题了。

另外：DTD声明错误一样会出现问题，建议使用最简单同时也是最安全的声明方式<! DOCTYPE HTML>。

这里是从原来页面上摘下来的一个精简后的错误模型代码。可以复制到html中，在opera下看效果。

    
                 
     
        
      基本走势        
      大小走势        
      奇偶分析        
      质合分析        
      除5余数        
      五行走势        
      和值走势        
      连号走势        
      跨度走势    
     
        
     
    
      
            以上效果是错误的，可以修改3个地方。            1：可以修改dtd为正确的方式，我不知道这里的dtd为什么会写成这样。其实这样的声明是最简单而且永远不会出错的 < ! DOCTYPE HTML > ，我一直这么使用。               但是很多人就是喜欢加上一堆的长代码，认为不这样声明会在ie下出错，等等问题。我觉得都是猜测，没有经过实践。                           2：修改tahoma字体为等高的如宋体等。                        3：设置span的height。                
    
     
    

 

总结：

碰到bug，不用着急。按照流程一步一步来分析。建模型，找不同之处。最好有总结的习惯，把碰到过的bug都能总结起来，bug再多也是有限的。