2

FirefoxとChromeではうまく機能するがIEでは機能しないCSSで作成されたボタンがあります...

何が間違っているのかわかりませんが、コードが欠落しているか間違っていると思います。これが私のコードです：

.red-button{ 
 width: 400px;
 height: 100px;
 line-height: 100px;
 color: white;
 text-decoration: none;
 font-size: 20px;
 font-family: "ff-dagny-web-pro", Helvetica, Arial, sans-serif;
 font-weight: bold;
 display: block;
 text-align: center;
 position: relative; 
border: 1px double black;
border-radius: 10px;
background-image: -webkit-gradient(linear, center top, center bottom, 
                  from(#e80000),   to(#840000));
background-image: -webkit-linear-gradient(top, #e80000, #840000);
background-image: -moz-linear-gradient(top, #e80000, #840000);
background-image: -o-linear-gradient(top, #e80000, #840000);
background-image: -ms-linear-gradient(top, #e80000, #840000);
background-image: linear-gradient(to bottom, #e80000, #840000);
text-shadow: 1px 1px 1px black;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
box-shadow: 0 1px 5px rgba(0,0,0,0.75);
}

これをIE9とIE8で機能させたいのですが、境界線の半径などのプロパティがIE 8で機能しないことはわかっていますが、グラデーションをIE8と9で機能させたいと思います。

助けてください、ありがとう！

4

4 に答える 4

2

filter次のプロパティを追加してみてください。

filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', 
          startColorstr=#FFE80000, endColorstr=#FF840000)

このリソースによると、これはIE5.5まで機能するはずです。

于 2012-08-21T03:39:53.607 に答える
2

コードを作成し、非常に便利で便利なサイトを見つけました。

正しいコードは次のとおりです。

background: #e80000; /* Old browsers */
background: -moz-linear-gradient(top, #e80000 0%, #840000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e80000), color-stop(100%,#840000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e80000 0%,#840000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e80000 0%,#840000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e80000 0%,#840000 100%); /* IE10+ */
background: linear-gradient(to bottom, #e80000 0%,#840000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e80000', endColorstr='#840000',GradientType=0 ); /* IE6-9 */

このサイトには、IE9に関するメモがあります。

IE9での完全なマルチストップグラジエントのサポート（SVGを使用）。

グラデーションのあるすべての要素に「グラデーション」クラスを追加し、HTMLに次のオーバーライドを追加して、IE9のサポートを完了します。

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
      filter: none;
    }
  </style>
<![endif]-->

IE9を使用した完全なマルチストップグラデーションを備えたIE9コード（SVGを使用）：

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4MDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4NDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

/* Code as Above */
于 2012-08-21T03:55:42.267 に答える
1

IE8はこれらのCSS3宣言をサポートしていませんが、IE5からIE8はFilterプロパティをサポートしています。

私はあなたが使うことができる素晴らしいCSS3ジェネレーターを見つけました。

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFE80000,EndColorStr=#FF840000);
于 2012-08-21T03:37:42.940 に答える
1

IE9のCSS3のサポートは、信じられないほど素晴らしいものではありません。css3はサポートしていますが、仕様全体をサポートしているわけではありません。CanIuse.comは、さまざまなブラウザバージョンがサポートする機能を見つけるための優れたリソースです。

残念ながら、IE9は線形グラデーションをサポートしていないため、背景画像を使用するか、フォールバック（単色）を選択するか、フィルターを使用するか、ポリフィルを使用する必要があります。Microsoftフィルターを使用して線形グラデーションを作成することを提案した人もいますが、実際に機能します。ほとんどの基本的なサイト（つまり、アニメーションがそれほど多くない、jQuery、または本格的なWebアプリを考えてください）については、CSS3Pieをチェックすることをお勧めします。セットアップは非常に簡単で、よりクリーンなcss3を作成でき、すべての面倒な作業を自動的に実行できます。さらに、IE6までサポートされています。

于 2012-08-21T03:44:46.597 に答える