reactjs - 对 IE 的下拉菜单做出反应

Question

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

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

显示：块

就像这里的主题一样，但它没有用。

我的代码如下所示：

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 中的结构如下所示：

铬合金

在 IE11 中像这样

IE11

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

有任何想法吗？

先感谢您。

Answer 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 没有正确读取它。也许它可以帮助将来的人:)