3

簡単な付箋のページを書きました。すべてのメモは、段落内のコンテンツ、スパン内の削除ボタン、およびツールチップ付きの画像を含むリストアイテムです。ここに、1つのメモを含むHTMLがあります。

<ul id="wall" class="ui-sortable">
  <li id="note1">
    <a href="#">
      <span class="del">x</span>
      <p>1221212 23 23 3322 3223</p>
      <img src="..."/>
      <div class="tooltip">Tooltip</div>
    </a>
  </li>
  .
  .
  .
</ul>

そしてここにcssがあります：

ul li a
{
  outline: none;
  text-decoration: none;
  display: block;
  height: 200px;
  width: 200px;
  -moz-transition: -moz-transform 0.2s ease;
}

ul li a:hover
{
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  font-size: 105%;
  position: relative;
}

ul li p
{
  overflow: hidden;
  margin: 0;
  padding: 20px;
  -moz-user-select: none;
  font-size: 120%;
  font-style: italic;
}

.del
{
  -moz-user-select: none;
  font-size: 22px;
  position: absolute;
  left: 183px;
  float: right;
  display: none;
  padding: 2px 5px 0 0;
}

問題は、このコードでは全音符は問題なくスケーリングされますが、スケーリングが完了すると、テキスト（pとspanの両方）のサイズが少し変更され（約1〜2ピクセル）、非常に見栄えが悪くなります。'ul li a'から-moz-transitionを削除すると問題は修正されますが、スケーリングがまったくスムーズになりません。同様の問題に遭遇した人はいますか？私もこれを試しました：

-moz-transition: -moz-transform 0.2s ease;
-moz-transition: font-size 0.2s ease;

しかし、これは役に立ちません。「ジャンプ」テキストなしでcss変換スケールを使用する方法はありますか？今のところjQueryUIは使用したくないので、この単純なタスクにのみ使用するには重すぎます。

これについてのjsfiddleは次のとおりです 。

もちろん、問題を観察するにはFirefoxから実行する必要があります。Chromeでは、AFAIKで問題なく動作します。

更新：FF8.0で実行する必要がありますが、13.0.1をインストールしましたが、このグリッチもそこに表示されます。

4

1 に答える 1

0

フォントサイズを 105% から 100% に変更するだけです。

ul li a:hover
  {
    -moz-box-shadow: 10px 10px 7px black;
    -webkit-box-shadow: 10px 10px 7px black;
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    font-size: 100%;
    position: relative;
  }
于 2012-06-21T10:14:37.880 に答える