javascript - HTML 布局在 fiddle 和浏览器上呈现不同

Question

我做了一个小网页，源代码可以在FIDDLE上找到。 .它使用 jquery plugin这是我为自动完成所做的。

该插件在初始化输入后添加了一个新的 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>

问题是:

此网页在 fiddle 上按预期完美呈现

但是当我在浏览器上运行相同的代码(没有 fiddle)时，它无法正确显示，移动了所有元素(显示在附加的屏幕截图中)

任何人都可以解释可能导致问题的原因吗？

Answer 1

您的 .test2 类的宽度为 80%。

其他输入的默认宽度为 173px。

如果您将 fiddle 窗口的大小调整为更大的宽度，您将看到同样的问题。

要解决此问题，您可以将 display: block 添加到您的 .test2 类中。