2

我正在开发一个 ASP.NET 4 应用程序并针对 http://localhost/mysite 进行测试 - 我花了一段时间研究 Firefox (v12.0) 中 Twitter Bootstrap 按钮的问题，它们看起来很奇怪。

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

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

奇怪的行为如下：

'button' 标记如下（在这种情况下，a<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 文件，即使我不包含它，它也是相同的行为。

4

2 回答 2

1

我今天早些时候遇到了这个问题。这个链接： twitter bootstrap button 在 Firefox 和 chrome 中奇怪地改变了渲染帮助了我。

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

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

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

于 2012-06-07T20:48:30.157 回答
0

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

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

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

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

于 2013-11-13T13:15:51.503 回答