下拉列表未按预期显示在IE11中(或如何正确显示在Chrome/FF中)

下拉列表在Internet Explorer 11（IE11）中未按预期显示，或者在Chrome和Firefox中显示不正确，可能是由于多种原因造成的。以下是一些基础概念、可能的原因以及解决方案：

基础概念

下拉列表通常是通过HTML的<select>元素和<option>元素来实现的。CSS用于样式化，而JavaScript可以用来添加交互性。

可能的原因

CSS兼容性问题：不同浏览器对CSS的支持程度不同，尤其是旧版本的IE。
JavaScript错误：脚本可能在某些浏览器中运行不正确。
HTML结构问题：不正确的HTML结构可能导致元素渲染异常。
缺少浏览器前缀：某些CSS属性需要特定的浏览器前缀才能在旧浏览器中正常工作。
浏览器默认样式：不同浏览器有不同的默认样式，可能会影响元素的显示。

解决方案

1. 检查CSS兼容性

确保使用的CSS属性和值在IE11以及其他现代浏览器中都得到支持。可以使用工具如Can I use来检查兼容性。

2. 使用Polyfills

对于不支持某些现代特性的浏览器，可以使用polyfills来填补功能上的空白。例如，可以使用selectivizr来为IE添加CSS3选择器支持。

3. 检查JavaScript错误

使用浏览器的开发者工具检查控制台是否有JavaScript错误，并修复它们。

4. 确保HTML结构正确

确保<select>和<option>元素正确嵌套，没有遗漏闭合标签。

5. 添加浏览器前缀

对于需要前缀的CSS属性，确保添加了适当的前缀。例如：

select {
  -webkit-appearance: none; /* Chrome, Safari */
  -moz-appearance: none;    /* Firefox */
  appearance: none;         /* Standard syntax */
}

6. 重置浏览器默认样式

使用CSS重置或Normalize.css来减少浏览器之间的默认样式差异。

示例代码

以下是一个简单的下拉列表示例，以及如何确保它在不同浏览器中正确显示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Example</title>
<style>
  /* Reset default styles for select element */
  select {
    width: 200px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-appearance: none; /* Chrome, Safari */
    -moz-appearance: none;    /* Firefox */
    appearance: none;         /* Standard syntax */
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
  }
</style>
</head>
<body>

<select>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

</body>
</html>

应用场景

下拉列表广泛应用于表单输入、导航菜单、设置选项等场景。确保其在不同浏览器中正确显示对于提供良好的用户体验至关重要。

通过上述步骤，你应该能够解决下拉列表在不同浏览器中的显示问题。如果问题仍然存在，建议使用浏览器的开发者工具进行更详细的调试。

下拉列表未按预期显示在IE11中(或如何正确显示在Chrome/FF中)

、、

无论选择了下拉列表中的哪一项，它都将“保留”在下拉显示字段中，其他选项将显示在上方和/或下方，具体取决于可用选项列表中的当前选择位置： Initial Dropdown display When the我需要让选择总是落在选择字段的下方(当然，在Chrome/FF中他们总是这样做)，但主要用户将使用IE11。

浏览 19提问于2019-12-06得票数 0

1回答

IE11上的角4性能/ CPU使用率

、、

它在chrome & firefox上运行良好，但在IE11上的性能、加载时间是不可接受的。Chrome/FF上的路由器更改约为0.5s (用于更详细的页面)，而在IE11上约为5s。打开下拉列表(通过添加/删除CSS类来设置display:none)在Chrome/FF上是即时的，在IE11上大约需要3秒。IE11分析器在打

浏览 1提问于2017-11-27得票数 2

回答已采纳

1回答

Dojo图表无法在Firefox中工作，资源管理器

、

我使用的脚本在选项卡：中有一个dojo图表。如果您使用Google 打开图表页面，则图表是可见的。如果您用Firefox或Explorer 11打开它，图表是不可见的。

浏览 4提问于2018-01-13得票数 0

回答已采纳

1回答

删除选项在下拉列表的IE11中不起作用

、

这在除IE11之外的所有浏览器中都有效。下拉列表似乎有正确的值，但是下拉列表中项目的显示来自一个带有li标签和字段的ul。然而，当我检查元素时，选择列表中的选项被删除了，但是创建的ul却没

浏览 0提问于2018-04-23得票数 0

6回答

分别理解offsetWidth、clientWidth、scrollWidth和-Height

、、

此外，有几个来源在网上提供混乱或不正确的信息。你能给出一个完整的解释，包括一些视觉提示吗？此外，如何使用这些值来计算滚动条的宽度？

浏览 5提问于2014-01-11得票数 506

回答已采纳

1回答

MVC-实体框架，状态ID必须是一个数字问题

、、、、

我想要做的是，当我从dropdownList中选择国家和州时，我希望将其保存在第三个表中-而不是按其名称。我想保存他们的身份证。 ? ?

浏览 10提问于2020-07-07得票数 1

回答已采纳

1回答

Intl.NumberFormat在IE11中不能正常工作？

、、、、

我正在使用原生Javascript的Intl库来显示中英文的格式化数字。new Intl.NumberFormat('en-GB', { notation: "compact" , compactDisplay: "short" }).format(91005);Chrome中的输出: 91K Output IE11</

浏览 0提问于2020-06-04得票数 2

1回答

CSS重写到joomla模块类不适用于IE 11和Chrome(适用于ff)

、

我在我的本地主机上的Joomla站点上使用了模块类后缀将模块的标题文本更改为标题图片。这些更改在FF中显示良好，但在IE11或Chrome43.0中不显示。我在所有3个浏览器中都检查了任务检查器，发现CSS覆盖文件在IE和Chrome中不起作用。

浏览 2提问于2015-07-11得票数 1

4回答

数据列表箭头不在ie和firefox中

、、、、

我得到的箭头下拉只在铬。而且，ie和firefox中的箭头也不会出现。在firefox中，搜索是惰性搜索ie；它不是基于第一个字母。 <option value="Firefox"></option> <option value=&quo

浏览 0提问于2015-06-25得票数 16

1回答

如何使顶部菜单中的下拉菜单不延迟/动画地出现？

、、、

我有一个带有下拉的菜单。如何使下拉菜单像在站点上一样立即出现？编辑:我找出了延迟的原因:下拉列表在鼠标移动时不会显示，如果鼠标在菜单项上不停止，它只会在鼠标为stopped.So时显示-下拉列表将更新甚至显示…… Edit2:看起来，问题只出现在Chrome、FF和IE中，工作正常。

浏览 1提问于2012-04-08得票数 0

1回答

边缘模式下的IE11不显示禁用下拉文本

、

JSFiddle：select[disabled='disabled']::-ms-value {} 当使用IE11 (在边缘模式下)时，任何禁用的下拉列表都显示为空.虽然Firefox和Chrome中相同的代码显示了所选的值，但无法更改.我已经寻找了各种解决方案，并尝试了一些(在小提琴中实现)，

浏览 0提问于2016-03-02得票数 1

回答已采纳

1回答

选择使用Ng Model not reflecting in Internet Explorer 11的下拉列表

、、、

所以我面临着一个问题，我在我的代码中使用了html select，并且我使用了ngModel进行双向绑定。它实际上绑定了下拉列表中的值，但目前它没有绑定任何内容，在IE11中显示为空这在chrome和火狐中运行良好。现在我研究了一下，在IE11中ngModel不能与select一起工作。img - works fine on chrome img

浏览 10提问于2018-12-28得票数 1

1回答

在Firefox中显示预选选项

、

我在Chrome上做得很好。如果用户拥有与其帐户相关联的状态或国家，则会以编程方式预选州或国家，并将其显示为下拉列表中的默认值。但是在firefox中，当这些值被选中时，可见的选择仍然显示为-State和Country-(当下拉列表收缩时)。展开这些下拉列表时，将选择正确的值。当菜单收缩时，如何</em

浏览 4提问于2013-12-16得票数 1

回答已采纳

1回答

在IE11中单击触发的下拉鼠标退出/鼠标保存事件

、、

我有一个带有菜单控件的页面，它显示在hover上，隐藏在mouseout上--在这个页面上，我还在页面顶部有一个下拉控件，足够接近几个菜单项将悬停菜单暴露到它通常覆盖下拉控件的位置。这种行为是不需要的，所以我的计划是在blur()上mouseout上的下拉列表强制关闭它。这一切工作在铬，但不是在IE。; });在Chrome中可以看到预

浏览 3提问于2017-06-28得票数 0

回答已采纳

1回答

将HTML片段加载到select标记时的不一致结果

、、、

，这使我认为代码存在一个问题： Opera和Safari需要第二次鼠标

浏览 2提问于2014-03-25得票数 0

1回答

网站在本地服务器上看起来很好，但在上传时崩溃得很可怕

、、

这是我正在处理的网站干杯, 基思

浏览 0提问于2014-11-06得票数 0

1回答

如何使下拉菜单在选择嵌套菜单时展开

、、、

下面是我的下拉列表，但是当我单击下拉列表中的一个嵌套菜单(例如:图书注册)时，下拉菜单会在页面加载时折叠，比如这个，下面是下拉代码<Second Level Link<span class="fa arrow"></span></a> <ul class="nav nav-

浏览 2提问于2016-02-04得票数 2

回答已采纳

1回答

Primeflex Flexgrid对IE11的支持？有没有办法让flexgrid在IE上工作？

、、、、

在IE11中，使用"p-dir-col“的列对齐不能按预期显示。要进行复制，请查看在Internet Explorer11中打开的演示页面： => IE中的每行之间没有空格，而列在Chrome中可以正确显示。

浏览 3提问于2019-09-10得票数 1

1回答

MS Edge没有在unicode符号上应用css样式“颜色”

、

我有以下代码：<span style="color: blue;" title="square">◼</span>这个颜色在Chrome，FF，Opera，IE11中得到了正确的应用，但是Edge忽略了它，并显示为黑色。

浏览 0提问于2018-05-16得票数 1

回答已采纳

1回答

为什么dijit TimeTextBox不在下拉中以值为中心？

、、、

计划是让它在IE11企业模式下运行。应用程序的某些部分使用dojo，我们团队中很少有人知道这一点，而我已经在googled和googled上搜索过，无法找到这个问题的答案！clickableIncrement: 'T00:01', visibleRange: 'T00:30',}, "PickerId"); 在IE8下拉以当前值为中心，并

浏览 2提问于2015-08-25得票数 0

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

下拉列表未按预期显示在IE11中(或如何正确显示在Chrome/FF中)

基础概念

可能的原因

解决方案

1. 检查CSS兼容性

2. 使用Polyfills

3. 检查JavaScript错误

4. 确保HTML结构正确

5. 添加浏览器前缀

6. 重置浏览器默认样式

示例代码

应用场景

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐