css - 图片与 CSS 对齐会导致 Firefox/Windows 出现问题，但不会导致 Firefox/linux 出现问题

Question

我有一个关于 CSS、Firefox 和 Windows 的奇怪的具体错误。

让我解释一下：我用

vertical-align:sub;

...它可以在 Linux 上的 Firefox 和 Windows 上的 IE 上正确显示，但不能在 Firefox 和 Windows 上正确显示。我在 Linux 和 Windows 上使用相同版本的 Firefox。

问题的一些图片（很抱歉给您带来不便，但我不能发布图片或超过2个链接，所以我必须这样做）：

http://www.mercuryproductions.de/kram/Errors.html

页面链接：http: //www.sontag-consult.com/

如果我摆弄它，vertical-align我可以让它在 Win 上与 FF 一起工作，但它会弄乱其他组合。

Answer 1

我会这样做：

CSS

将此添加到您的 CSS 文件中：

ul
{
    margin:0;
    padding:0;
}
ul li
{
    margin:0 0 0 3px;
    padding:0;
    display:inline-block;
    list-style-type:none;
}
ul li:first-child
{
    margin-left:0;
}
ul li a
{
    padding:3px 8px;
    display:block;
    font-weight:bold;
    text-decoration:none;
    color:#fff;
    background-color:#000;
}
ul li a i
{
    margin:2px 5px 0 0;
    display:block;
    float:left;
    width:20px;/* width of your img */
    height:15px;/* height of your img */
    background:url(/sprites.png) no-repeat;/*your img file here*/
}​

HTML

这就是您的 HTML 代码的样子：

<ul>
    <li>
        <a href=""><i></i>Lang 1</a>
    </li><li>
        <a href=""><i></i>Lang 1</a>
    </li><li>
        <a href=""><i></i>Lang 1</a>
    </li>
</ul>  

演示

顺便说一句，可能建议您使用图像精灵。

---

更新：

解决方案 1（IMG 标签）：

CSS

ul li a img
{
    margin:2px 5px 0 0;
    border:0;
    display:block;
    float:left;
    width:20px;/* width of your img */
    height:15px;/* height of your img */
}​

HTML

<ul>
    <li>
        <a href=""><img src="/deutsch.png">Deutsch</a>
    </li>
</ul>

演示

解决方案 2（带图像精灵）：

CSS

ul li a i
{
    background:url(/sprites.png) no-repeat;
    margin:2px 5px 0 0;
    display:block;
    float:left;
    width:20px;/* width of your img */
    height:15px;/* height of your img */
}

ul li a i.deutsch
{
    background-position:0 0;
}

解决方案 3（无图像精灵）：

CSS

ul li a i
{
    margin:2px 5px 0 0;
    display:block;
    float:left;
    width:20px;/* width of your img */
    height:15px;/* height of your img */
}

ul li a i.deutsch
{
    background:url(/deutsch.png) no-repeat center center;
}

HTML

<ul>
    <li>
        <a href=""><i class="deutsch"></i>Deutsch</a>
    </li>
</ul>