0

私は html 、 css 、および javascript を使用して Web サイトを開発しています。ボタンの表示はブラウザごとに異なります。同じページの別のブラウザのスクリーンショットを次に示します。

インターネットエクスプローラ ： ここに画像の説明を入力

ファイアフォックス : ここに画像の説明を入力

私は実際に firefox で表示されるように表示するつもりです。ここで私が使用しているCSSコードの一部:

#button{
float: left;
width: 500px;
height: 50px;
line-height: 50px;
background-color: #06C;
padding-left: 20px;

-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;

-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, #60B842),
    color-stop(0.85, #7FD13D)
);
background-image: -moz-linear-gradient(
    center bottom,
    /* change these to change the button colors */
    #B58515 0%,
    #DC9E1F 85%
);

/* change this to change the text color and font type */
color:#fff;
font-family:arial,helvetica,sans-serif;
font-size:17px;
font-weight:bold;
text-shadow:1px 1px 1px #4c9434;
    }

    #button:hover{
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, #6DD14B),
    color-stop(0.85, #85DB40)
);
background-image: -moz-linear-gradient(
    center bottom,
    /* change these colors to change the mouse hover colors */
    #E17100 0%,
    #FF9326 85%
);
box-shadow:0 2px 0 #5EA839;
    }

グラデーションの使用には問題がある可能性があります。ウェブページが異なるブラウザで同じように見えるように、誰かがコードの変更または別の方法を提案できますか?

4

5 に答える 5

1

私は通常、ColorzillaのUltimate CSS Gradient Generatorを使用して、クロスブラウザーCSSグラデーションコードを生成します。

于 2013-01-10T06:04:29.093 に答える
0

クロスブラウザーの互換性に役立つCSSグラデーションのセットを次に示します。

/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%);
于 2013-01-10T08:23:37.787 に答える
0

何が起こっているかというと、IE はグラデーション CSS を完全に無視します。IE でグラデーションを表示するには、「フィルター」を追加する必要があります。

このページは、クロスブラウザー グラデーションを作成するのに役立ちます。

于 2013-01-10T05:59:03.187 に答える
0

すべてのブラウザ サポート グラデーション プロパティはこれを使用します 

 background: -moz-linear-gradient(top, white, #1a82f7);/*Mozila*/
    background: -o-linear-gradient(top, white, #1a82f7); /*opera*/
    background: -webkit-linear-gradient(top, white, #1a82f7);/*Chrome and safari*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='white',    EndColorStr='#1a82f7'); /*IE*/
于 2013-01-10T07:21:56.880 に答える
0

とは別に、IE やその他のブラウザーのプレフィックスも使用する必要があります-webkit-gradient()。-moz-gradient()

例：

#linearBg2 {
  /* fallback */
  background-color: #1a82f7;
  background: url(images/linear_bg_2.png);
  background-repeat: repeat-x;

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #2F2727, #1a82f7);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #2F2727, #1a82f7);

  /* IE 10 */
  background: -ms-linear-gradient(top, #2F2727, #1a82f7);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #2F2727, #1a82f7);
}

ソース

詳細はこちら

IE 9 以前は gradient をサポートしていないことに注意してください。

于 2013-01-10T05:57:46.477 に答える