我在 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 中的垂直对齐? 谢谢。
最佳答案
As per the OP ,我将其添加为答案。你在 CSS 中有这段代码,需要 vertical-align: middle
:
.twitter-typeahead {
vertical-align: middle;
}
关于html - Chrome 和 FF 中跨度内输入的不同显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36828640/