一个Tahoma字体bug引发的思考—关于样式bug的分析流程

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

问题：我们经常会碰到很多莫名其妙的样式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。这个时候已经明白是字体导致的，于是百度一下这个字体，找到了这篇文章http://www.cnblogs.com/radom/archive/2010/07/04/1770979.html，说是中英文高度不一致引起的。
7。再查看一下dtd，为什么我会想到的是dtd声明会出错呢？因为经验，我以前也碰到因为dtd声明错误导致的问题。于是我修改了dtd，发现也OK了。

最后得到结果：
Tahoma这个字体，在中文和数字等混合排版的时候，会导致了中文和数字的line-height不一致，从而导致最终的高度不一致。
从而导致了上面连号走势被挤到除3余数的后面了.
解决办法就很明白了。因为是字体高度引起的。所以
第1个办法：换个高度相同的字体，用宋体就没有问题了。
第2个办法：限定高度。设置height后，也没有问题了。
另外：DTD声明错误一样会出现问题，建议使用最简单同时也是最安全的声明方式<! DOCTYPE HTML>。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:esun>
<head>

    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    div{
        padding-left: 10px;
        width: 755px;
        float:left;
        font-family: Tahoma;
    }
    span{
        display: block;
        float: left;
        line-height: 25px;
        height: 25px;
        width: 104px;
    }
    
    
    </style>
</head>
<body>

    <div>
        <span><a href="http://trend.com/ssqZst!ssqjbzs.jhtml?flag=jbzs" target="_blank">基本走势</a></span>
        <span><a href="http://trend/ssqZst!ssqdxzs.jhtml" target="_blank">大小走势</a></span>
        <span><a href="http://trend/ssqZst!ssqjozs.jhtml" target="_blank">奇偶分析<s></s></a></span>
        <span><a href="http://trend/ssqZst!ssqzhzs.jhtml" target="_blank">质合分析</a></span>
        <span><a href="http://trend/ssqZst!ssqc3ys.jhtml" target="_blank">除5余数</a></span>
        <span><a href="http://trend/ssqZst!ssqwxzs.jhtml" target="_blank">五行走势</a></span>
        <span><a href="http://trend/ssqZst!ssqhzzs.jhtml" target="_blank">和值走势<s></s></a></span>
        <span><a href="http://trend/ssqZst!ssqlhzs.jhtml" target="_blank">连号走势<s></s></a></span>
        <span><a href="http://trend/ssqZst!ssqkdzs.jhtml" target="_blank">跨度走势</a></span>
    </div>
    
    <div style='margin-top:20px'>
    <pre>
            以上效果是错误的，可以修改3个地方。
            1：可以修改dtd为正确的方式，我不知道这里的dtd为什么会写成这样。其实这样的声明是最简单而且永远不会出错的 < ! DOCTYPE HTML > ，我一直这么使用。
               但是很多人就是喜欢加上一堆的长代码，认为不这样声明会在ie下出错，等等问题。我觉得都是猜测，没有经过实践。
               
            2：修改tahoma字体为等高的如宋体等。
            
            3：设置span的height。
            
    </pre>
    </div>

    
</body>
</html>

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