在 Internet Explorer 中截断 HTML5 占位符答案

【问题标题】：HTML5 Placeholder cut off in Internet Explorer在 Internet Explorer 中截断 HTML5 占位符
【发布时间】：2017-01-12 01:41:40
【问题描述】：

在 Internet Explorer 9-11 中，我的 html5 占位符位于输入容器下方。我在这里阅读了许多关于 IE 中的 html5 占位符问题的帖子，但我看到的唯一解决方案是使用 jquery 插件。我添加了这个插件，但不幸的是它没有效果：https://github.com/mathiasbynens/jquery-placeholder。

我尝试了更多的 CSS 解决方案，比如添加内边距、移除内边距、设置最小高度、移除最小高度、增加行高等。这是增加内边距后的样子：@ 987654322@。它有足够的空间，但它仍然被切断。

在 Chrome 和 FF 中，它看起来像这样：http://i.imgur.com/0YRkcGu.png（它应该是这样的）。

您可以在此处查看该网站的沙盒并仔细查看我的 CSS。表单在侧边栏中（尽管网站上的所有表单都存在同样的问题。http://hracuity.staging.wpengine.com/blog/

感谢您的帮助！

【问题讨论】：

标签： jquery html placeholder

【解决方案1】：

我在行高方面遇到了同样的问题，导致底部占位符剪切。

对我有用的解决方案是将line-height 重置为正常状态（以避免剪切文本）并将display 设置为inline-block（以参考输入line-height 定位占位符）

input:-ms-input-placeholder {
  line-height: normal;
  display: inline-block;
}

【讨论】：

【解决方案2】：

原来是行高问题。我将行高设置为 1.75，这导致部分占位符文本被截断。将 line-height 设置为 1 修复它。

【讨论】：

【解决方案3】：

这可能会有所帮助：

// FUNCTION TO SET PLACEHOLDER IN I.E.

(function($) {
    function toggleLabel() {
        var input = $(this);

        if (!input.parent().hasClass('placeholder')) {
            var label = $('<label>').addClass('placeholder');
            input.wrap(label);

            var span = $('<span>');
            span.text(input.attr('placeholder'))
            input.removeAttr('placeholder');
            span.insertBefore(input);
        }

        setTimeout(function() {
            var def = input.attr('title');
            if (!input.val() || (input.val() == def)) {
                input.prev('span').css('visibility', '');
                if (def) {
                    var dummy = $('<label></label>').text(def).css('visibility','hidden').appendTo('body');
                    input.prev('span').css('margin-left', dummy.width() + 3 + 'px');
                    dummy.remove();
                }
            } else {
                input.prev('span').css('visibility', 'hidden');
            }
        }, 0);
    };

    function resetField() {
        var def = $(this).attr('title');
        if (!$(this).val() || ($(this).val() == def)) {
            $(this).val(def);
            $(this).prev('span').css('visibility', '');
        }
    };

    var fields = $('input, textarea');

    fields.live('keydown', toggleLabel);
    fields.live('paste', toggleLabel);
    fields.live('focusin', function() {
        $(this).prev('span').css('color', '#000000');
    });
    fields.live('focusout', function() {
        $(this).prev('span').css('color', '#000000');
    });

    $(function() {
       $('input[placeholder], textarea[placeholder]').each(
           function() { toggleLabel.call(this); }
       );
    });

})(jQuery);

【讨论】：

感谢您抽出宝贵时间回复。不幸的是，这并没有做到。我添加了脚本，它导致了一些奇怪的行为。在 Chrome 中，它将我的占位符完全移到了输入之外：i.imgur.com/54GpNCQ.png，在 IE 中，它把它们放在输入旁边并更改了布局：i.imgur.com/G7KcUh4.png
是的，我在显示它们时已经退出了同样的问题。您需要调整它们的位置。也许display:inline-block 或position: relative; 应该显示得很好？

【解决方案4】：

这将解决它：

input.mycustomclass:-ms-input-placeholder {
    line-height: 1;
}

【讨论】：