Question

我有一个单页网站，只有在点击一个元素时才会出于信息目的。

我几乎完成了一些事情，但我发现div元素只能在Safari中扩展。它在Firefox或Chrome中不起作用？

以下是该网站的链接 - Click Me

非常感谢任何帮助。要点注意 - 背景图片很好。它只是坐在上面的元素，现在正在解决问题。

Answer 1

要处理您的扩展问题：jQuery＆gt; = 1.8会自动添加供应商前缀。所以而不是：

 $('#outer').css({'-webkit-transform': 'scale(' + scale + ')'});

你可以写：

 $('#outer').css({'transform': 'scale(' + scale + ')'});

这应该可以修复你的FireFox问题。如果您使用旧版本的jQuery，请查看here。它是添加这些供应商前缀的插件。以下代码示例来自插件CSSHooks。

(function($) {
  if ( !$.cssHooks ) {
    throw("jQuery 1.4.3+ is needed for this plugin to work");
    return;
  }

  function styleSupport( prop ) {
    var vendorProp, supportedProp,
        capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
        prefixes = [ "Moz", "Webkit", "O", "ms" ],
        div = document.createElement( "div" );

    if ( prop in div.style ) {
      supportedProp = prop;
    } else {
      for ( var i = 0; i < prefixes.length; i++ ) {
        vendorProp = prefixes[i] + capProp;
        if ( vendorProp in div.style ) {
          supportedProp = vendorProp;
          break;
        }
      }
    }

    div = null;
    $.support[ prop ] = supportedProp
    return supportedProp;
  }

  // check for style support of your property 
  // TODO by user: swap out myCssPropName for css property
  var myCssPropName = styleSupport("myCssPropName");

  // set cssHooks only for browsers that
  // support a vendor-prefixed border radius
  if (myCssPropName && myCssPropName !== 'myCssPropName') {
    $.cssHooks["myCssPropName"] = {
      get: function(elem, computed, extra) {
        // handle getting the CSS property
        return $.css(elem, myCssPropName);
      },
      set: function(elem, value) {
        // handle setting the CSS value
        elem.style[myCssPropName] = value;
      }
    };
  }
})(jQuery);

无论如何，由于你没有完成，位置问题仍然存在。

<强>更新

Here is the working fiddle - 从上面举了你的例子，并纠正了css行。在FF，Safari和Chrome中看起来正确。

在Firefox或Chrome中，图片元素不会缩放到屏幕尺寸？

1 个答案: