2012-05-24 56 views
2

我有一個ASP.NET 4應用程序正在開發並針對http:// localhost/mysite進行測試 - 我花了一段時間在Firefox(v12.0)中查看Twitter Bootstrap按鈕的問題,他們看起來很奇怪。本地主機上的Firefox中的引導按鈕?

但是我注意到,在測試時,如果我換了URL併爲我的機器的FQDN更改了'localhost'(例如http://mymachine.mydomain.com/mysite),那麼它正常工作並且如預期那樣。

這是個好消息,因爲這意味着沒有一個「bug」,因此我必須修復,但我很好奇它爲什麼發生在第一位。

怪異的行爲如下:

的「按鈕」被標記爲如下(在這種情況下,<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">

在負載(前鼠標懸停)

Button as page loads

當你把你的鼠標,它與顏色從下往上以填滿大約0.5秒,看起來像這樣:

enter image description here

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

在負荷(前鼠標懸停)

enter image description here

鼠標懸停後,再次它填補了從下向上的顏色,在約0.5秒,並且看起來像這樣:

enter image description here

就像我說的,這隻發生在使用Firefo x,只有在看本地主機時。其他瀏覽器都很好。我正在使用剛剛下載的bootstrap.js副本(今天下載),沒有任何修改,我只包含一個其他的css文件,即使沒有包含它,也是一樣的行爲。

回答

0

經過大量的努力,我終於能夠在Twitter Bootstrap中將這個問題固定到特定的CSS-Hack。

*background-image刪除*(星號)btn-primary和其他類似的類可以解決此問題。

但問題本身不在CSS中。這與實施有關。

例如,我使用AjaxMin來縮小和組合CSS,並且由於*property不是有效的CSS,所以Ajaxmin忽略了它呈現沒有這些屬性的最終CSS。 Buggy按鈕效果就是這樣一種副作用。