Question

我有以下代码在加载时为输入元素添加跨度，然后添加事件处理程序以捕获单击和模糊事件，但这不是重点。问题是在IE11中，动态添加的跨度不显示父元素（输入字段）中的左边距，而是在输入的左侧显示它（24px左边距），Firefox 29.0和Chrome 34.0.1847.131显示输入字段中的边距，因此给出一个缩进，将文本跨越输入背景图像。任何想法为什么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;
}

Answer 1

在<div>元素中包含<p>元素无效。这是导致问题的最可能原因。

IE11中的保证金问题

1 个答案: