在localhost上的Firefox中的Bootstrap按钮？

Question

我已经开发了一个针对http：// localhost / mysite开发和测试的ASP.NET 4应用程序 - 我花了一些时间来研究Firefox（v12.0）中Twitter Bootstrap按钮的问题，看起来很奇怪。

但是我注意到，在测试时，如果我交换了URL并将“localhost”更改为我的机器的FQDN（例如http://mymachine.mydomain.com/mysite），那么它正常工作并且符合预期。

这是一个好消息，因为它意味着没有“错误”，因此我必须解决，但我很好奇为什么它首先发生。

奇怪的行为如下：

“按钮”标记如下（在这种情况下，<a>看起来像一个按钮）：

<p><a class="btn btn-success" href="checkout.aspx"><i class="icon-shopping-cart icon-white"></i> Checkout</a></p>

使用“真实”按钮时，我也有相同的行为，标记如下：

<p><input type="submit" name="ctl00$cphMainContent$btnProceedToCustomerDetails" value="Next: Your details" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$cphMainContent$btnProceedToCustomerDetails&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="cphMainContent_btnProceedToCustomerDetails" class="btn btn-primary" /></p>

在这两种情况下，按钮呈现灰色，不可读的状态，然后当您将鼠标悬停在其上时，将其填充为“填充”，直到大约75％填满，然后停止填充。

这是一些图片

<a class="btn btn-success">

加载时（鼠标悬停前）

当你把鼠标放在它上面时，它会在大约0.5秒内从底部向上填充颜色，最后看起来像这样：

<input type="submit" class="btn btn-primary">

加载时（鼠标悬停前）

鼠标悬停后，再次从底部向上填充颜色，大约0.5秒，看起来像这样：

就像我说的，这只发生在使用Firefox时，只有在查看localhost时才会发生。其他浏览器都很好。我正在使用新下载的bootstrap.js副本（今天下载），没有修改，我只包含一个其他的css文件，即使我不包含它，也是相同的行为。

Answer 1

我今天早些时候遇到了这个问题。这个链接：twitter bootstrap button changes rendering oddly in firefox and chrome帮助了我。

在我的CSS中，我应用了以下内容：

.btn-primary, .btn-danger, .btn-success {    background-image: none;    filter: none;}

有效。我的页面现在可以在firefox中正确呈现。 Chrome对我来说很好。

Answer 2

经过多方努力，我终于能够将这个问题归结为Twitter Bootstrap中的特定CSS-Hack。

从* *background-image和其他类似类中删除btn-primary（星号）可以解决此问题。

但问题本身不在CSS中。它与实施有关。

例如，我使用AjaxMin来缩小和组合CSS，因为*property不是一个有效的CSS，Ajaxmin忽略了它渲染没有这些属性的最终CSS。越野车按钮效应就是这样一种副作用。