0
小さなWebページを作成しました。そのソースコードはFIDDLEにあります。それは私がオートコンプリート用に作ったjquery pluginを使っています。問題があるHTMLレイアウトはフィドルとブラウザで異なってレンダリングされます
<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>
：
で期待どおりにこのWebページが完全にレンダリングプラグインが自動補完リストが含まれている初期化された入力、後に新しいdiv (.mridautocomplete-list)を追加します
しかし、ブラウザで（フィドルなしで）同じコードを実行すると、正しく表示されず、すべての要素がシフトします（スクリーンショットで表示されますアタッチド）
誰でも問題の原因を説明できますか？
回答ありがとうございます！したがって、パーセント値でディメンションを持つ場合、すべての入力に 'display：block'を追加する必要があります?? – mrid
@mridいいえ、要素を画面の残りの部分をクリアするには、 'display：block'を使用します。'
'を追加して改行を作成することもできます。 。:)それは.. – TryingToImprove
申し訳ありません...しかし、「クリア」を意味するのですか？ – mrid