Question

我正在使用Mathias Bynens相当不错的jQuery placeholder plugin来在my site中在本地不支持它的浏览器中显示占位符。我在Google Analytics代码之后立即使用页面页脚中的custom version Modernizr调用插件。我将它与脚本（在this Stack Overflow answer中描述）结合起来在IE6中显示PNG。

在标题中调用Modernizr，该站点也使用Typekit。只有当占位符功能丢失时才会调用jQuery，否则实际上不需要它。

我在WordPress博客页脚中调用的相关代码如下所示：

1。修复PNG：



    s.parentNode.insertBefore(g, s)
    }(document, 'script'));
    function fixPngs() {
        for (i = 0; i  0) {
                fixPng(a, document.images[i])
            }
        }
    }
    function fixPng(a, b) {
        b.src = "http://cdn.donaldjenkins.com/media/themes/belgravia/2/spacer.gif";
        b.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
        a "', sizingMethod='scale')"
    };

2。添加占位符：


    Modernizr.load({
        test: Modernizr.input.placeholder,
        nope: ["http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", "http://cdn.donaldjenkins.com/wp-content/themes/belgravia/js/placeholder.js"],
        complete: function () {
            $('input, textarea').placeholder();
        }
    });

3。调用PNG脚本


fixPngs();

不幸的是，占位符显示在IE6和IE9中，但IE7或IE8中的不是。我已经尝试设置一个复制上述资源的html sandbox site，试图找出造成问题的原因 - 但我遇到了同样的问题。我尝试过其他占位符插件，效果相同。

修改：在Mathias Bynens有用的响应之后，在测试占位符jQuery插件是否在没有 Modernizr之后工作时，我得出结论它是一个Modernizr问题：如果系统地加载占位符插件和jQuery，而不使用Modernizr，占位符显示在所有浏览器中 - 当通过Modernizr加载时，它们显示在IE6和9中，但不显示在IE 7和8中。

我尝试从Modernizr的自定义版本切换到开发版本，但结果保持不变。

Answer 1

http://cdn.donaldjenkins.com/wp-content/themes/belgravia/js/jquery.placeholder.min.js对我来说是404错误。我猜这是问题所在？：）

$ curl -sI http://cdn.donaldjenkins.com/wp-content/themes/belgravia/js/jquery.placeholder.min.js | head -n 1
HTTP/1.1 404 Not Found

这可能与您的问题无关，但如果您需要Modernizr.input.placeholder支持，则不应仅使用textarea@placeholder检查。原因是某些浏览器支持input@placeholder，但不支持textarea@placeholder。 Modernizr.input.placeholder仅代表input支持。

该插件内部执行此检查，但如果您想使用Modernizr，请执行以下操作：

Modernizr.load({
  'test': Modernizr.input.placeholder && Modernizr.textarea.placeholder,
  'nope': ["http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", "http://cdn.donaldjenkins.com/wp-content/themes/belgravia/js/jquery.placeholder.min.js"],
  'complete': function() {
    $('input, textarea').placeholder();
  }
});

也就是说，如果您不需要textarea@placeholder支持，则可以删除该检查，然后从选择器中删除textarea。

Modernizr.load不在IE7 / IE8中提供输入和textarea占位符支持

1。修复PNG：

2。添加占位符：

3。调用PNG脚本

1 个答案: