Safariでspanにposition:absoluteした要素がAjaxでバグる

goto_jp 681views 更新:2014年9月3日
.num {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 12px;
  line-height: 12px;
  padding: 0 2px;
}

このクラスは下記のように、動的に内部の数字が書き換わり、0件の時は空という要素です。

<span class="num">10</span>

静的HTML上では問題なく表示されていたのですが、Ajaxで動的に表示される際にSafariだけで表示が崩れてしまいました。

そこで何となくカンで下記のように「display: block;」を追加

.num {
  display: block;
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 12px;
  line-height: 12px;
  padding: 0 2px;
}

spanは通常inline要素で「position:absolute」を付与すると必然的にblock要素になるのですが、その宣言を明示的に行わないとSafariでは崩れるのかもしれません。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません