在Chrome和FF中跨越输入的不同显示

Question

我在内部输入了一些HTML代码。

<div class="SCnField">
<div class="SCnFieldMarker">
    ⇒
</div>
<div class="SCnFieldValue">
    <span class="scAttribute selectedSCnNode">
        <span class="twitter-typeahead" style="position: relative; display: inline-block;">
            <input type="text" data-name="true" class="typeahead scn-input tt-hint"
                   disabled="" autocomplete="off"
                   spellcheck="false"
                   style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none;">
            <input type="text" data-name="true" class="typeahead scn-input tt-input" autocomplete="off"
                   spellcheck="true" dir="auto"
                   style="position: relative; vertical-align: top; background-color: transparent;">
            <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: nowrap;"></pre>
            <span class="tt-dropdown-menu"
                  style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
            <div class="tt-dataset-idtf">

            </div>
        </span>
        </span>
        <div class="atrribute-colon">:</div>
    </span>
</div>

摆弄风格：https://jsfiddle.net/bq7Lsw2L/

FF和Chrome显示的差异：

我用垂直对齐，显示，边距，填充等进行了实验......但是没有结果 如何在FF中修复垂直对齐？ 感谢。

Answer 1

As per the OP，我将此作为答案添加。你在CSS中有这个代码需要vertical-align: middle：

.twitter-typeahead {
  vertical-align: middle;
}

Answer 2

不确定为什么Chrome会自动垂直居中，但您应该使用

.twitter-typeahead {
  vertical-align: middle;
}

＆＃13;

＆＃13;

.SCnField {
  min-height: 40px;
}
.SCnFieldMarker {
  width: 30px;
  display: inline-block;
  vertical-align: top;
  margin-top: 7px;
  margin-left: -32px;
}
.SCnFieldValue {
  display: inline-block;
}
.selectedSCnNode {
  border-left: 2px solid rgb(96, 230, 119) !important;
  padding-left: 5px;
}
.scn-input {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: white;
}
.twitter-typeahead {
  vertical-align: middle;
}

＆＃13;

<div class="SCnField"><div class="SCnFieldMarker">⇒</div><div class="SCnFieldValue"><span class="scAttribute selectedSCnNode"><span class="twitter-typeahead" style="position: relative; display: inline-block;"><input type="text" data-name="true" class="typeahead scn-input tt-hint" disabled="" autocomplete="off" spellcheck="false" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none;"><input type="text" data-name="true" class="typeahead scn-input tt-input" autocomplete="off" spellcheck="true" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: nowrap;"></pre><span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"><div class="tt-dataset-idtf"></div></span></span><div class="atrribute-colon">:</div></span></div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我有一些很好的解决方法 使用以下代码，您可以为FF编写特定样式

@-moz-document url-prefix() {
// css code for FF
}