Question

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

经过一番调查，我认为IE11中的render：after元素是一个问题，我添加了

display：block

与主题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

您甚至看不到Chrome中的：after元素。

有什么想法吗？

谢谢。

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无法正确读取它。也许对以后的人有帮助：）

在IE上反应下拉

1 个答案: