我做了一个小网页,其源代码可在FIDDLE。它使用我为自动完成而创建的jquery plugin。HTML布局呈现不同的小提琴和浏览器
插件添加初始化输入后新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
预期但是,当我在我的浏览器上运行相同的代码(没有小提琴),它不会正确显示,移动所有元素(屏幕截图附件)
任何人都可以解释什么可能会导致问题?
感谢您的答案..它的作品!所以'display:block'应该被添加到所有的输入,如果他们有百分比的尺寸? – mrid
@mrid否。如果你想让元素“清除”屏幕的其余部分,那么你可以使用'display:block' ..你也可以添加一个'
'来创建换行符。 。:)这取决于.. – TryingToImprove
对不起...但是'清楚'的意思是? – mrid