1

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で動作させることができますが、他の組み合わせが台無しになります。

4

1 に答える 1

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>
于 2012-08-12T10:06:57.260 に答える