アンカータグIE 11に同じクラスを適用すると、2つの異なる背景画像が生成されます。

同じクラスを2つの異なる要素に適用していますが、背景プロパティに対して生成されるものが異なります。アンカータグIE 11に同じクラスを適用すると、2つの異なる背景画像が生成されます。

ボタン1 - rgba（0、0、0、0）線形勾配（rgb（0,81,0）0％、rgb（36,138,30）100％）繰り返しスクロール0％0％/自動パディングボックスボーダーボックス

ボタン2 - rgba（0、0、0、0）直線勾配（rgb（36,138,30）0％、rgb（0,81）、0）100％）繰り返しスクロール0％0％/自動パディングボックスの枠線

同じクラスを使用して2つの異なる値が生成される理由はわかりません。

これは、クラスの背景プロパティが次のようになっているものです。背景：直線勾配（下端、＃248a1e 0％、＃005100 100％）;

私は、私が期待している方法をレンダリングするボタンと、このポストのボタンのような他のボタンで終わっています。 Crossbrowser css gradient in IE10, IE11

2017-07-25 Chris Atwood

これが起こっているページへのリンク、または複製された場所のjsfiddle（または実際のhtmlとcss）を取得できる場合は、多くの場合、問題はあなたが考えるものではなく、同じクラスを適用する方法がない限り、異なる結果が得られます。 – Don

あなたのCSSとサポートしているHTMLのすべてを投稿できますか？それなしで何が起こっているのかを具体的に把握するのは難しいことです。 – dbrree

https://jsfiddle.net/9k6r4okr/ –

同じボタンに2つのクラスを使用しています。最後のCSSがレンダリングされます。したがって、 "contact-button"のスタイルは、クラス "green-button"のスタイルをオーバーライドします。このようなオーバーライドされたプロパティには！importantを使用してください。

.green-button { 
       text-align: center; 
       color: #fff; 
       border: 1px solid #016d01; 
       font-size: 14px; 
       font-weight: bold; 
       padding: 8px 14px 8px 14px; 
       background: #52b152; 
       background: linear-gradient(to bottom, #248a1e 0%,#005100 100%) !important; 
       border-radius: 4px; 
      }

出典

2017-07-25 14:50:19 Prabhakaran

すべてのスタイルをオフにして、両方のアンカーに緑色のボタンを残しても、同じ効果が得られます。 –

IEで問題があるかもしれません。キャッシュが正しくクリアされず、再ロードされていません。手動でキャッシュをクリアして、もう一度お試しください。私はそれが私のために正常に動作するすべてのブラウザで試してみました。 – Prabhakaran

これを追跡するために削除してみました。これは非常に奇妙に思えました。私は物事を取り除くと効果が消え去ったので、左の溝の外にフォーム要素を持って行きました。私はすべてのフォーム要素を元に戻し、テキストエリアだけを取り出して、それが問題の原因となっていました。私はテキストエリアを戻してクラスを取り出し、問題を引き起こしたテキストエリアに適用されたクラスでした。私はそれをグリッチの原因となったクラスのfont-sizeプロパティに絞り込んだ。私は全てを取り入れてズームレベルを変更し、問題はなくなりました。ボタンの表示にグリッチを引き起こしていたズームレベルは1つだけだった。間違いなくいくつかのブラウザの表示バグが発生しているので、私は自分の変更をチェックして移動します。

出典

2017-07-26 14:57:41

アンカータグIE 11に同じクラスを適用すると、2つの異なる背景画像が生成されます。

答えて

関連する問題