我有以下代码在加载时向输入元素添加跨度,然后添加事件处理程序以捕获点击和模糊事件,但这不是重点。问题是在 IE11 中,动态添加的 span 不显示父元素(输入字段)内的左边距,而是在输入的左侧显示它(24px 左边距),Firefox 29.0 和 Chrome 34.0.1847.131 显示输入字段内的边距,因此给出一个缩进,将 span 中的文本推过输入背景图像。 IE 这样做的任何想法?
加载中:
$(document).ready(function(){
$('input[type=text][title],input[type=password][title],textarea[title]').each(function(i)
{
$(this).addClass('input-prompt-' + i);
var promptSpan = $('<span class="input-prompt"/>');
$(promptSpan).attr('id', 'input-prompt-' + i);
$(promptSpan).append($(this).attr('title'));
$(promptSpan).click(function(){
$(this).hide();
$('.' + $(this).attr('id')).focus();
});
if($(this).val() != ''){
$(promptSpan).hide();
}
$(this).before(promptSpan);
$(this).focus(function()
{
$('#input-prompt-' + i).hide();
});
$(this).blur(function(){
if($(this).val() == ''){
$('#input-prompt-' + i).show();
$('#input-prompt-' + i).css('display', 'inline')
}
});
});
});
HTML:
<p>
<input type="password" title="Password" name="password" id="mPass" />
<div class="notice" id="ePass"></div>
</p>
CSS:
#mPass {
background:#fff url('../img/pass.png') no-repeat;
background-position: 4px 9px;
padding:10px 0px 10px 2em;
}
.input-prompt {
position: absolute;
font-style: italic;
color: #aaa;
margin: 0.9em 0 0 24px;
display:inline;
}
最佳答案
<div>
无效<p>
中的元素元素。这是您遇到问题的最可能原因。
关于jquery - IE11 中的 margin 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23374430/