0

CSSレイアウトに少し問題があります

だから私はいくつかのdivをインラインで整列させ、それらを3ピクセル上に移動したい(見た目を完璧にするため)

IE10/11 では正常に動作しますが、FireFox と chrome では動作しません。

リンクはできませんが、いくつかの画面を挿入できます

これが私が欲しいものです（IE10/11で作業しています）

http://beehiver.jurion.me/ie11.png

そして今、FireFox :

http://beehiver.jurion.me/firefox.png この部分の CSS は次のとおりです。

#buttons {
    display: inline-block;
    color: #526271;
}

    #buttons a {
        color: #526271;
        transition: all 250ms ease-out;
    }


        #buttons a:hover {
            color: #1ab9d6;
        }

    #buttons div {
        display: inline-block;
        width: 100px;
        height: 53px;
        border-left: 1px solid grey;
        vertical-align: top;
        transform: translate(0px,-2px);
        padding-left: 3px;
        text-align: center;
        transition: all 250ms ease-out;
        border-bottom: 2px solid transparent;
    }

        #buttons div:hover {
            border-left-color: #1ab9d6;
            border-bottom-color: #1ab9d6;
        }

        #buttons div i {
            font-size: 34px;
            vertical-align: top;
            transform: translate(0px,10px);
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

なぜ機能しないのかわかりません:(

編集 ：

J McFee による回答:

inline-block は空白に敏感です。div をフローティングすることをお勧めします。

正常に動作します ！（質問とは関係なく、解決できる小さな問題が発生します）

変更点:

#buttons div {
    float:left;

と

<div class="clearfix"></div>
4

1 に答える 1

0

「#buttons div」が「#buttons」内にあると仮定すると、これを変更してみてください。

#buttons {
    display: inline-block;
    color: #526271;
}

に

#buttons {
    display: block;
    color: #526271;
    height:53px;
}
于 2013-10-18T05:28:24.567 に答える