在IE上反應下拉

Question

我只是從反應開始，在IE11中顯示下拉式插入符號（箭頭）時遇到問題。 我正在使用react-toolbox，它在Chrome和Firefox中可見。

經過一番調查，我認為這是IE11中的render：after元素的問題，我添加了

顯示：塊

就像這里的主題一樣，但是沒有用。

我的代碼如下所示：

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無法正確讀取它。 也許將來對某人有幫助:)