绝对定位跨越输入时的奇怪行为

Question

我正在尝试为我的输入框创建验证错误消息，但我遇到了一个奇怪的行为以及 Chrome 和其他浏览器之间的差异。

我需要将错误标签设置为显示在输入旁边，它应该显示在其他元素之上。我的方法在 FF 中运行良好，但在 chrome.

中运行良好

问题是在Chrome中错误信息落在输入框下方。

调整 html 预览区域的大小以查看效果。

.editor-group {
    display: inline-block;
    vertical-align: top;
    margin-left: 5px;
    margin-right: 10px;
}
.editor-label {
    min-width: 120px;
    display: inline-block;
    vertical-align: middle;
}
.editor-field {
    min-width: 150px;
    display: inline-block;
    margin: 3px 0;
    vertical-align: middle;
}

.field-validation-error {
    background-repeat: repeat-x;
    min-width: 20px;
    position: absolute !important;
    text-align: center;
    z-index: 1000;
    outline: 0 none;
    background-position: center center;
    background-color: #FFF4C9;
    border: solid 1px #FFE79E;
    color: #635145;
    margin-right: 6px;
    display: inline-block;
    padding: 2px 5px 1px 6px;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
    font-weight: normal;
    font-size: .85em;
}
<div class="editor-group">
    <div class="editor-label editor-required">
        <label  for="NameOfReceiptNo1">Name</label>
    </div>
    <div class="editor-field">
        <input type="text" value="">
        <span class="field-validation-error">
            <span class="k-icon k-warning"></span>
            Name is required
        </span>
    </div>
</div>

Answer 1

当您使用 position:absolute 时，最好指定元素应该存在的确切位置。在您的示例中，我将 right: -116px; top: 0; CSS 添加到 .field-validation-error 并将 position:relative 添加到 .editor-group field-validation-error 的第一个父级，所以现在 field-validation-error 将知道留在 editor-group

的右侧

plunker

.editor-field {
 min-width: 150px;
 display: inline-block;
 margin: 3px 0;
 vertical-align: middle;
 position: relative;
}

.field-validation-error {
 background-repeat: repeat-x;
 min-width: 20px;
 position: absolute !important;
 text-align: center;
 z-index: 1000;
 outline: 0 none;
 background-position: center center;
 background-color: #FFF4C9;
 border: solid 1px #FFE79E;
 color: #635145;
 margin-right: 6px;
 display: inline-block;
 padding: 2px 5px 1px 6px;
 border-radius: 4px 4px 4px 4px;
 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
 font-weight: normal;
 font-size: .85em;
 right: -116px; top: 0;
 }

Answer 2

将float: left添加到.editor-field input并将float: right添加到.field-validation-error，您也可以从.field-validation-error[=17=中删除display: inline-block ]

Fiddle

绝对定位跨越输入时的奇怪行为

Strange behaviour when absolute positioning span around an input

html

css

firefox

google-chrome

css-position