Internet中的HTML5占位符被切断
Internet中的HTML5占位符被切断
提问于 2014-09-29 22:08:47
在Internet 9-11中，我的html5占位符正在下降到输入容器下面。我已经阅读了很多关于IE中html5占位符问题的文章，但我看到的唯一解决方案是使用jquery。我添加了这个插件，但不幸的是它没有效果：https://github.com/mathiasbynens/jquery-placeholder。
我尝试过更多的CSS解决方案，比如添加填充、移除填充、设置最小高度、删除最小高度、增加线条高度等等。下面是增加填充的示例：http://i.imgur.com/N0eFh7t.png。有足够的空间供它使用，但它还是被切断了。
在Chrome和FF中，它看起来是这样的：http://i.imgur.com/0YRkcGu.png (这就是它应该看起来的样子)。
您可以在这里查看站点的沙箱，并很好地查看我的CSS。表单在侧栏中(尽管站点上的所有表单都有相同的问题)。http://hracuity.staging.wpengine.com/blog/
我很感激你的帮助！
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-10-04 00:48:45
原来是线路高度问题。我将行高设置为1.75，导致部分占位符文本被切断。将直线高度设置为1固定。
Stack Overflow用户
发布于 2017-01-05 14:20:17
我也有同样的问题，线高度导致占位符的底部剪裁。
对我来说有效的解决方案是将line-height重新设置为正常(避免剪切文本)，并将display设置为inline-block (在输入line-height中定位占位符)。
input:-ms-input-placeholder {
line-height: normal;
display: inline-block;
}Stack Overflow用户
发布于 2014-09-29 22:17:21
这可能有助于：
// 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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26109699
复制相关文章
相似问题
腾讯云开发者
