2

ASP.NET 4 アプリを開発し、http://localhost/mysite に対してテストしています - 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 ファイルを 1 つだけ含めています。含めなくても同じ動作です。

4

2 に答える 2

1

私は今日早くこの問題に遭遇しました。このリンク： FirefoxとChromeでの奇妙なレンダリングのTwitterブートストラップボタンの変更が役に立ちました。

私の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 をレンダリングすることを無視していました。バグのあるボタン効果は、そのような副作用の 1 つです。

于 2013-11-13T13:15:51.503 に答える