锚点/按钮在chrome上消失，在使用Bootstrap鼠标悬停之前不会重新出现？

Question

我遇到了一些非常奇怪的行为。由于某些原因，我无法在jsfiddle或bootply上复制此内容，并且它仅限于Chrome（没有尝试过其他WebKit浏览器）。

我有一个按钮，实际上可以是<a>，<span> <div>或<button>，类别为＃34; btn＆＃34;来自Twitter Bootstrap和我选择的任何其他东西（在这种情况下＆＃39; btn-danger＆＃39;，但它会发生在任何事情上）。

当用户单击该按钮时，它会添加输入字段，直到达到我使用jQuery禁用按钮的最大值。一个简单的button.attr('disabled', true);

现在，添加的字段有一点字体，但是＆＃39; x＆＃39;用户可以单击以将其删除，从而重新启用该按钮。我在下面的图片中包含了以下图片：

在Chrome上，当button.attr('disabled', false);在点击处理程序（如下所示）中执行时，按钮消失，直到用户的鼠标悬停在按钮上。

   $('.append-options').on('click', 'a.remove-option', function(e){
        $(this).parent('.form-group').remove();
        if(!maxOptions()){
            button.attr('disabled', false);
        }
        return false;
    });

我已经尝试了十几个不同的实现，但它仍然会发生。我已经尝试在重新启用代码之后添加更多JS以及＃34; jog＆＃34;它出现了，但没有任何效果。如果我在Chrome控制台中手动启用/禁用该按钮，它就可以正常工作。这不是IE / Firefox中的问题。

现在，我已经缩小了一个直接奇怪的条件清单，所有条件都必须是真的才能实现这一点，但我似乎无法做出正面或反面的原因。

1. 如果＆＃39; btn＆＃39; class不在按钮上，它不会发生。我已经将它缩小到了.btn css中的这一行。如果我删除它，它不会发生： border: 1px solid transparent;

2. 此链接/按钮/ span / div位于表单内。表单中还有另一个按钮，下面显示了HTML。它在页面中的位置高于相关按钮。如果我将其位置移动到低于＆＃34;添加选项＆＃34;按钮，问题消失了。 <button type="submit" class="btn btn-success btn-lg pull-right">Update</button>

3. FontAwesome似乎在某种程度上涉及此问题。如果我从页面中删除css文件，问题就消失了。但后来我没有字体 - 真棒。我已经尝试删除所涉及的特定项目的字体 - 真棒，但这似乎没有什么区别。

为了它的价值，我已经在W3C上验证了我的HTML，所以不是因为标记无效。

任何人都对如何/为何如此发生有任何想法？我知道没有jsfiddle它有点难，但也许我可以尝试解决这个问题的一般领域？

感谢任何帮助。

Answer 1

将position: relative;添加到.btn将解决此问题。

Answer 2

我也有这个问题。我发现有一个CSS规则与按钮的禁用状态相匹配。我的修复是简单地添加另一个我想要的背景颜色的CSS规则，具有更高的匹配优先级。