Question

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

我尝试了更多的CSS解决方案，比如添加填充，删除填充，设置最小高度，移除最小高度，增加行高等等。这是现在增加填充的样子：{ {3}}。它有足够的空间，但它仍然被切断。

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

您可以在此处查看该网站的沙箱，并仔细查看我的CSS。表单位于侧边栏中（尽管网站上的所有表单都存在同样的问题。http://i.imgur.com/0YRkcGu.png

我感谢任何帮助！

Answer 1

我有同样的问题，线高导致底部的占位符切割。

对我有用的解决方法是将line-height重置为正常（以避免剪切文本）并将display设置为inline-block（以便在输入{{{ 1}}）

line-height

Answer 2

这可能有所帮助：

// 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);

Answer 3

事实证明这是一个行高问题。我将行高设置为1.75，导致部分占位符文本被截断。将行高设置为1固定它。

Answer 4

这将解决它：

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

在Internet Explorer中切断HTML5占位符

4 个答案: