Twitter bootstrap Firefox表问题，使用react和引导

我举了一个简单的例子

←点击这里

jsx

这在Chrome中可以很好地工作，而在IE中添加-ms网格也可以正常工作

---

在Firefox中，按ShowMore按钮总是会增加高度，我不明白。这是React问题还是网格问题还是引导问题？

这是Firefox与css的问题。它与显示有关：网格和边距。 该错误已报告，但尚未确认。

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isDropdownNow: false };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({
            isDropdownNow: !prevState.isDropdownNow
        }));
    }
    render() {
        if (!this.props.data) {
            return null;
        }
        let _this = this;
        let keyData = this.props.data.filter(x => x > 5);
        let filteredData = this.state.isDropdownNow ? this.props.data : keyData;

        const rowList = filteredData.map(function (element, i) {
            return <tr key={i}><td>{element}</td></tr>;
        });
        let buttonText = this.state.isDropdownNow ? 'Show Less' : 'Show More';
        let dropDownButton = (
            <tr style={{ height: '45px' }}>
                <td colSpan='2'>
                    <button type="button" className="btn btn-link" style={{ width: '100%', fontWeight: 'bold' }} onClick={this.handleClick}>{buttonText}</button>
                </td>
            </tr>
        );
        return <div ref='root'>
            <div className='osce-body-row'>
                <table className='table tableTest'>
                    <tbody>
                        {rowList}
                        {dropDownButton}
                    </tbody>
                </table>
            </div>
        </div>;
    }
}

ReactDOM.render(<Test data={[1,2,3,4,5,6,7,8,9,10]} />, document.querySelector("#root"))