我在 http://codepen.io/liang179/pen/WQvERK 有一个 HTML 页面包含与大型数据列表关联的标签。它在 chrome 中显示有溢出。屏幕外仍有数据。但在带有滚动条的 firefox 中很好。 我该怎么做才能使它像在 Firefox 中一样在带有滚动条的 Chrome 中显示。 下面是代码。
$('#trigger').click(function(){
$class = "animated infinite " + $('#type').val();
$('#target').removeClass().addClass($class);
});<div style="text-align: center;">
<div id='target' style="margin: 200px auto; width: 200px; height:200px; background-color:#663399"></div>
<div>
<input id="type" list="classes">
<datalist id="classes">
<option value="bounce">
<option value="flash">
<option value="pulse">
<option value="rubberBand">
<option value="shake">
<option value="swing">
<option value="tada">
<option value="wobble">
<option value="jello">
<option value="bounceIn">
<option value="bounceInDown">
<option value="bounceInLeft">
<option value="bounceInRight">
<option value="bounceInUp">
<option value="bounceOut">
<option value="bounceOutDown">
<option value="bounceOutLeft">
<option value="bounceOutRight">
<option value="bounceOutUp">
<option value="fadeIn">
<option value="fadeInDown">
<option value="fadeInDownBig">
<option value="fadeInLeft">
<option value="fadeInLeftBig">
<option value="fadeInRight">
<option value="fadeInRightBig">
<option value="fadeInUp">
<option value="fadeInUpBig">
<option value="fadeOut">
<option value="fadeOutDown">
<option value="fadeOutDownBig">
<option value="fadeOutLeft">
<option value="fadeOutLeftBig">
<option value="fadeOutRight">
<option value="fadeOutRightBig">
<option value="fadeOutUp">
<option value="fadeOutUpBig">
<option value="flipInX">
<option value="flipInY">
<option value="flipOutX">
<option value="flipOutY">
<option value="lightSpeedIn">
<option value="lightSpeedOut">
<option value="rotateIn">
<option value="rotateInDownLeft">
<option value="rotateInDownRight">
<option value="rotateInUpLeft">
<option value="rotateInUpRight">
<option value="rotateOut">
<option value="rotateOutDownLeft">
<option value="rotateOutDownRight">
<option value="rotateOutUpLeft">
<option value="rotateOutUpRight">
<option value="hinge">
<option value="rollIn">
<option value="rollOut">
<option value="zoomIn">
<option value="zoomInDown">
<option value="zoomInLeft">
<option value="zoomInRight">
<option value="zoomInUp">
<option value="zoomOut">
<option value="zoomOutDown">
<option value="zoomOutLeft">
<option value="zoomOutRight">
<option value="zoomOutUp">
<option value="slideInDown">
<option value="slideInLeft">
<option value="slideInRight">
<option value="slideInUp">
<option value="slideOutDown">
<option value="slideOutLeft">
<option value="slideOutRight">
<option value="slideOutUp">
</datalist>
<button id="trigger">Trigger</button>
</div>
</div>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>最佳答案
自 2014 年以来开放的 Chromium 错误跟踪器上有此错误的票证。最近的一些评论表明它可能会在 2017 年初得到优先处理。
https://bugs.chromium.org/p/chromium/issues/detail?id=375637
Comment 65 by zkoch@…um.org, Sep 16 2016
[…] I'll try to get this prioritized in early 2017.
Comment 69 by rbyers@…um.org, Mar 23 2017
The predictability program is reviewing the top 50 starred Blink bugs this quarter, and this is #46 on that list. We’re hoping that for each we can either close it, set an owner and target milestone, or set a NextAction date so that we know when to check back in.
更新:2018 年 4 月 17 日的评论表明已发布修复:
Comment 91 by lonnie…@…rt.com, Apr 17
I'd like to add thanks for this also. The implementation of the scroll bar looks really nice in Version 65.0.3325.181 (Official Build) (64-bit).
然而，由于在 Windows 10 中发现了一些错误，该票证仍然开放(截至 2018 年 5 月)。它已合并到票证 #773041 中。 .
关于html - 在 chrome 中使用 datalist 的 HTML5 <input> 标签溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32452680/