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>

<强> DEMO

BTW，可能建议您使用image sprites。

更新

解决方案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>

<强> Demo

解决方案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>

使用CSS对齐图片会导致Firefox / Windows出现问题，但Firefox / Linux不会出现问题

1 个答案:

更新