2017-02-19 11 views
-2

問題は、バックグラウンドの一部として使用しているCSSグラデーションが、ページ全体の長さを占める代わりに120ピクセルごとに繰り返されることです。慎重に実験した結果、Internet Explorer 11ではページの長さが120pxだと思っているということがわかったと思います。 Edge、Firefox、またはChromeでこの問題は発生していません(Chromeには同じ問題があると言われましたが、CSSは認識されたページの高さを無視するような方法でコードされています)。Internet Explorer 11でCSS勾配が正しく機能していない

Internet Explorerにページの長さが120pxではないことを伝えるためにCSSを変更する方法はありますか?

関連データ:

勾配に関連する既存のコードは次のとおりです。問題があるまさに参照するには、問題のブログに

body{background: #fdb6b4; /* Old browsers */ 
background: -moz-linear-gradient(top, #ffdadd 0%, #fdb6b4 100%); /* FF3.6-15 */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdadd), color-stop(100%,#fdb6b4)); /* Chrome4-9,Safari4-5 */ 
background: -webkit-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Chrome10-25,Safari5.1-6 */ 
background: -o-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Opera 11.10-11.50 */ 
background: -ms-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* IE10 preview */ 
background: linear-gradient(to bottom, #ffdadd 0%,#fdb6b4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdadd', endColorstr='#fdb6b4',GradientType=0); /* IE6-9 */} 

リンク: http://www.http://madinskincareland.com

上記:どのようにFirefox 51.0.1のレンダリング方法(使用可能なモバイルデバイスを含む他のテスト済みブラウザはすべて正しくレンダリングされます)

image

+0

「[IE 11で線形グラデーションを使用して背景画像を作成する方法は?](http://stackoverflow.com/questions/19980079/how-to-make-background-image-with-linear-グラデーション・ワーク・オン・イット・11) – pol

+0

試してみてください。http://www.colorzilla.com/gradient-editor/ – Rahul

+0

私はcolorzillaからコードを入手しました –

答えて

0

CSS /リニアグラジエントドキュメントによれば、背景画像を使用する必要があります。 https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

body{ 
    background-color: #fdb6b4; /* Old browsers */ 
    background-image: -moz-linear-gradient(top, #ffdadd 0%, #fdb6b4 100%); /* FF3.6-15 */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdadd), color-stop(100%,#fdb6b4)); /* Chrome4-9,Safari4-5 */ 
    background-image: -webkit-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Chrome10-25,Safari5.1-6 */ 
    background-image: -o-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Opera 11.10-11.50 */ 
    background-image: -ms-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* IE10 preview */ 
    background-image: linear-gradient(to bottom, #ffdadd 0%,#fdb6b4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdadd', endColorstr='#fdb6b4',GradientType=0); 
} 
+0

ミロの提案された編集を行っただけで、変更はありません。 –

+0

実際には、セクションのミントの背景を取り除くことで、悪化しました。 –

0

私はbodyタグに勾配を適用すると、同じ問題がありました。私がすることは、本体の内部に別のタグ(例えば、メインまたはセクション)を追加し、それを相対的なトップ0に置き、左に0を置いてから、そのエレメントにグラデーションを適用することです。私はこれが助けて欲しい!

関連する問題