对 IE 的下拉菜单做出反应答案

【问题标题】：react dropdown on IE对 IE 的下拉菜单做出反应
【发布时间】：2018-12-23 22:13:12
【问题描述】：

我刚开始使用 react，但在 IE11 中显示下拉插入符号（箭头）时遇到问题。我正在使用 react-toolbox，它在 Chrome 和 Firefox 中可见。

经过一番调查，我认为这是在 IE11 中渲染 :after 元素的问题，我添加了

显示：块

就像在主题here 中一样，但它不起作用。

我的代码如下所示：

import ReactDropdown from 'react-toolbox/lib/dropdown'
<div className="row">
      <div className="col-md-4" style={{ textAlign: 'left' }}>
        <ReactDropdown
          source={searchDropdown.map(currentValue => {
            return { value: currentValue.value, label: currentValue.label}
          })}
          value={searchType}
          onChange={value => this.setState({searchType: value})}
          theme={dropdown}
        />
      </div>
</div>

Chrome 中的结构如下所示：

Chrome

在 IE11 中像这样

IE11

你甚至看不到 :after 元素，就像在 Chrome 中一样。

有什么想法吗？

提前谢谢你。

【问题讨论】：

标签： reactjs internet-explorer dropdown react-toolbox

【解决方案1】：

我通过为 :after 添加样式解决了这个问题：

    .value::after {
  border-top: 5px solid #0000a0;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

最初 react-toolbox 为插入符号生成边框为 calc/calc/calc... 显然 IE11 无法正确读取它。也许它可以帮助将来的某人:)

【讨论】：