html - Chrome 和 FF 中跨度内输入的不同显示

标签 html css firefox

我在 span 中输入了一些 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 vs. Chrome

我尝试了垂直对齐、显示、边距、填充等等……但没有结果 如何修复 FF 中的垂直对齐? 谢谢。

最佳答案

As per the OP ,我将其添加为答案。你在 CSS 中有这段代码,需要 vertical-align: middle:

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

关于html - Chrome 和 FF 中跨度内输入的不同显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36828640/

相关文章:

html - 位置固定的元素离开页面/窗口 - 如何在某个时候停止?

javascript - XHR2 文件传输。在 `progress` 事件处理程序期间访问二进制数据

html - 使用 CSS 定位图像(对抗默认框/空白)

javascript - 当用户滚动到页面部分时如何触发动画

html - -webkit-touch-callout 等效于 IE

jquery - Bootstrap 的可折叠侧边栏 4+

css - Grav 和 Foundation SASS,它是如何工作的?

javascript - Firefox 以不同的方式调整图像大小,导致图像之间出现间隙/额外像素?

css - Firefox、Chrome CSS 定位问题

javascript - 如何调试 Javascript 错误?