1

同じプロパティに複数行の CSS を追加しようとしていますが (複数のブラウザーでは無効)、最後に追加されたものしか表示されません。

なぜこれが起こるのかはわかりますが、それを修正する方法についての手がかりはありません。を に変更し=ても+=機能しませんでした。それらがすべて正しく追加されるように、これをどのように変更すればよいですか?

    ribbon.style.background = '-webkit-linear-gradient(left, ' + config.ribbonColorStart + ' 0%, ' + config.ribbonColorEnd + ' 100%)';
    ribbon.style.background = '-moz-linear-gradient(left, ' + config.ribbonColorStart + ' 0%, ' + config.ribbonColorEnd + ' 100%)';
    ribbon.style.background = '-o-linear-gradient(left, ' + config.ribbonColorStart + ' 0%,' + config.ribbonColorEnd + ' 100%)';
    ribbon.style.background = '-ms-linear-gradient(left, ' + config.ribbonColorStart + ' 0%,' + config.ribbonColorEnd + ' 100%)';
    ribbon.style.background = 'linear-gradient(to right, ' + config.ribbonColorStart + ' 0%,' + config.ribbonColorEnd + ' 100%)';
4

1 に答える 1

1

ブラウザで検出する必要があります。何かのようなもの：

try {
  ribbon.style.backgroundImage = "linear-gradient(...)";
  if( !ribbon.style.backgroundImage || ribbon.style.backgroundImage == "none")
    ribbon.style.backgroundImage = "-webkit-linear-gradient(...)";
  if( !ribbon.style.backgroundImage || ribbon.style.backgroundImage == "none")
    ribbon.style.backgroundImage = "-moz-linear-gradient(...)";
  if( !ribbon.style.backgroundImage || ribbon.style.backgroundImage == "none")
    ribbon.style.backgroundImage = "-o-linear-gradient(...)";
  if( !ribbon.style.backgroundImage || ribbon.style.backgroundImage == "none")
    // gradient not supported, fall back here
}
catch(e) {
  // gradient not supported and browser does't like bad values. Fall back here
}

IE9 はグラデーションをサポートして-ms-linear-gradientいませんでしたが、IE10 はグラデーションを完全にサポートしています。

もちろん、スタイルをクラスに入れ、そのクラスを要素に追加することもできます;)

于 2013-09-27T13:34:52.460 に答える