2

Google Web Toolkitを使用して、DIVとアンカーの子を持つDIVの親がいます。

<div class="unseen activity">
  <div class = "unseen-label"/>
  <a href .../>
</div>

次のCSSを使用すると、Chromeはアンカーの少し下に「見えないラベル」を表示します。ChromeとFireFoxの両方で正しく配置されています。

ただし、FireFoxはアンカーに沿ってラベルを表示します。

.unseen-activity div.unseen-label {
    display: inline-block;
    position: relative;
    top: -5px;
}

と

.unseen-activity a {
    background: url('style/images/refreshActivity.png') no-repeat;
    background-position: 0 2px;
    height: 20px;
    overflow: hidden;
    margin-left: 10px;
    display: inline-block;
    margin-top: 2px;
    padding-left: 20px;
    padding-right: 10px;
    position: relative;
    top: 2px;
}

Chromeがラベルをアンカーの中央に表示するようにCSSを変更する方法を教えてください。ただし、FireFoxを満足させ、正しくレンダリングする必要があります。

4

1 に答える 1

1

unseen-labelクラスを中央に配置するには、unseenクラスに幅を設定し、次に幅と一緒にunseen-labelセットを設定し、必要に応じて位置を合わせます。margin:0 auto;私はFirefoxに参加していないので、あなたが見ているものについてコメントすることはできません。ただし、unseenクラスを絶対位置に設定するとposition:relative;、unseen-label右上左下の負の間隔を使用して任意の場所に配置できます。次に、表示インラインブロックも削除します

于 2012-11-06T16:45:27.043 に答える