HTML布局在小提琴和瀏覽器上呈現的方式不同

Question

我做了一個小的網頁，其源代碼可以在FIDDLE上找到 。 它使用我為自動完成而制作的jquery插件 。

該插件在初始化輸入之后添加一個新的div (.mridautocomplete-list) ，其中包含自動完成列表：

<input id="test1">
<div class="mridautocomplete-list" style="display: block; left: 8px; width: 169px; position: absolute; background-color: white; border: 1px solid rgb(221, 221, 221); max-height: 150px; overflow-x: hidden; overflow-y: scroll; font-family: Arial; font-size: 13.3333px; z-index: 8888;">
    <p class="mrid-autocomplete-item" style="margin: 0px; padding-left: 2px; text-align: left; font-size: 13.3333px; cursor: default; background-color: white;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="mridautocomplete-item-image" style="height: 11px; width: 11px;"><span style="color: #4682B4; font-weight: bold;">a</span>aa</p>
    <p class="mrid-autocomplete-item" style="margin: 0px; padding-left: 2px; text-align: left; font-size: 13.3333px; cursor: default; background-color: white;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="mridautocomplete-item-image" style="height: 11px; width: 11px;">b<span style="color: #4682B4; font-weight: bold;">a</span>b</p>
</div>

<input class="test2">
<div class="mridautocomplete-list"></div>

<input class="test3">
<div class="mridautocomplete-list"></div>

問題是 ：

該網頁完美呈現了小提琴上的預期效果

但是，當我在瀏覽器上運行相同的代碼（不帶小提琴）時，它無法正確顯示，移動了所有元素（顯示在屏幕上）

任何人都可以解釋可能導致問題的原因嗎？

Answer 1

您的.test2類的寬度為80% 。

其他輸入的默認寬度為173px。

如果將小提琴窗口的大小調整為更大的寬度，則會看到相同的問題。

要解決此問題，您可以在.test2類中添加display: block 。

Answer 2

您是否已經嘗試過display CSS屬性？ 將第二個輸入設置為“ display：block”可將第三個輸入強制到下一行。

另一個選擇是將自動完成Javascript放在結束body標簽之前。 這在Chrome，Firefox和Safari中也對我有用。