javascript - (IE9) jQuery 验证错误垂直减半

Question

我遇到了 IE9 和 jQuery 验证的样式问题。我已经测试过，它在 Chrome 和 Firefox 中的样式正确。下面是我所看到的屏幕截图:

根据我聚焦元素的顺序，有时错误消息的顶部被 chop ，而其他时候它是错误消息的底部。检查元素，似乎有一个跨度被注入(inject)到包装 DOM 元素中，因此消息在有效时不会简单地隐藏。我被迫用一台垃圾笔记本电脑进行开发和测试，所以这可能与设置有关？我不确定...以前有人见过这种样式问题吗？如果有，原因是什么？

这是该字段的标记:

<div class="control-group col-md-6"><span title="Required" class="text-danger glyphicon glyphicon-asterisk"></span>
  <label class="control-label" for="OperatorName">Operator Name</label><span class="field-validation-error" data-valmsg-for="OperatorName" data-valmsg-replace="true"><span class="" for="OperatorName">The Operator Name field is required.</span></span>
  <div class="controls">
    <input aria-invalid="true" aria-required="true" class="form-control input-validation-error" data-val="true" data-val-length="The field Operator Name must be a string with a maximum length of 255." data-val-length-max="255" data-val-required="The Operator Name field is required."
    id="OperatorName" maxlength="255" name="OperatorName" value="Haley Chisholm and Morris Inc" type="text">
  </div>
</div>

Answer 1

jQuery 验证!!哦，悲伤.. 实际上，它确实做得很好。我个人的悲伤是由它生成的不必要的 DOM 元素引起的。没有人需要将跨度放在跨度中，跨度内，包裹在跨度中。对不起..给答案!

尝试给你的 span span 一个 margin-top。看起来你的文字被 chop 了。内联元素将继承父盒模型边界。在良好的做法中，您应该添加一个与文本大小相同的最小高度值，以帮助提高响应速度。

在这里阅读内联元素:https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente