Question

我在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/

使用的版本：

Chrome 23.0.1271.101
Firefox 18.0
Safari 6.0.2
Bootstrap 2.2.2
jQuery 1.8.2

Webkit：Twitter Bootstrap模式对话框导致文本消失

0 个答案: