0

通常は非表示の div 内にリンクがありますが、ホバーすると表示されます。クリックすると、モーダル ダイアログがトリガーされます。ダイアログを閉じると、リンクが消え、ホバーしても再表示されません。このバグは、Webkit ブラウザーでのみ発生します。Safari と Chrome では再現しましたが、Firefox では表示されませんでした。

HTML:

<div class="help-inline">
  <a href="#test-modal" data-toggle="modal">click me</a>
</div>

<div id="test-modal" class="modal fade">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">x</a>
    <h3>Modal</h3>
  </div>
  <div class="modal-body">Body</div>
</div>

CSS:

.help-inline {
    position: absolute;
    width: 20px;
    border: 1px solid black;
    height:      20px;
    max-height:  20px;
    line-height: 200px;
    overflow: hidden;
}

.help-inline:hover {
    line-height: 21px;
    width: auto;
    overflow: visible;
}

.help-inline a {
    position: relative;
}

ここで実際のバグを見ることができます: http://jsfiddle.net/extropic_engine/D2WQB/

使用したバージョン:

  • クローム 23.0.1271.101
  • Firefox 18.0
  • サファリ 6.0.2
  • ブートストラップ 2.2.2
  • jQuery1.8.2
4

0 に答える 0