Html Safari 10中未包裹和溢出容器的按钮（边缘精细，镀铬）

应该如下所示（在Edge和Chrome中）：

但在Safari 10中看起来是这样的：

我读了一些对解决问题没有帮助的问题。最近的一次：

答案并不能解决我的问题

如何让一个新按钮包装到一个新行，而不是使容器溢出

这是我的Sass和ReactJS组件。另外，我使用的是bootstrap4

class BasicQueryCuts extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cuts: {}
        }

        this.clearSelection = this.clearSelection.bind(this);
        this.selectAll = this.selectAll.bind(this);
    }

    clearSelection() {
        this.setState({
            cuts: {}
        })
        this.props.clearCuts();

    }

    // pieces together the cuts that are selected
    onCutSelect(cut, str) {

        // want to make sure it stays a number
        // so that it matches the server data
        // tends to convert to string if not specific
        cut = Number(cut);

        this.setState(
            ({cuts: prevCuts}) => (
                this.state.cuts[cut] && str !== 'all'
                ?
                    {cuts: {...prevCuts, [cut]: undefined }}                  
                :
                    {cuts: {...prevCuts, [cut]: cut }}
            ),
            () => this.props.basicQueryResults(this.state.cuts)
        )
    }

    selectAll() {
        const { country } = this.props;
        let { query_data } = this.props;

        if (query_data) {
            if (query_data[0].Country && country) {
                var data = _.filter(query_data, {'Country': country});
            } else {
                var data = query_data;
            } 
        }

        _.map(
            data, c => {
                this.onCutSelect(c.SortOrder, 'all');
            }
        )        
    }

    // These buttons will allow selecting everything, or clearing the selection
    renderAllNothingButtons() {
        let { query_data } = this.props;

        // generate the list of cuts
        if (query_data) {
            return (
                <Row>
                    <Col>
                        <Button color='primary' key='all' className='cuts-btn' onClick={this.selectAll}>
                            Select All
                        </Button>
                    </Col>
                    <Col>
                        <Button color='danger' key='cancel' className='cuts-btn' onClick={this.clearSelection}>
                            Clear All
                        </Button>
                    </Col>
                </Row>
            )            
        }
    }

    // renders the cut multi-list, by first ordering what comes from
    // the server and then depending on the survey
    // setting up the option and value keys
    renderCutsButtons() {
        const { country } = this.props;
        let { query_data } = this.props;

        if (query_data) {
            if (query_data[0].Country && country) {
                var data = _.filter(query_data, {'Country': country});
            } else {
                var data = query_data;
            } 
        }

        // generate the list of cuts
        return (
            <Row>
                {_.map(data, c => {
                    var cut = c.RptCutCat + ': ' + c.RptCut
                    return (
                        <Col key={c.SortOrder}>
                            <Button 
                                className={this.state.cuts[c.SortOrder] ? 'cuts-btn-active' : 'cuts-btn'}
                                key={c.SortOrder}
                                value={c.SortOrder}
                                onClick={event => this.onCutSelect(event.target.value, 'single')}
                            >
                                <span>{cut}</span>
                            </Button>
                        </Col>
                    )}
                )}
            </Row>
        )
    }

    render() {
        const { query_data } = this.props;
        return (
            <div className='results-bq-cuts'>
                {this.renderCutsButtons()}
                {query_data
                    ?
                    <hr />
                    :
                    null
                }
                {this.renderAllNothingButtons()}
                {query_data
                    ?
                    <hr />
                    :
                    null
                }
            </div>
        )
    }
}

此处编译的HTML：

---

原来这是Safari 10.0.0的问题。升级了虚拟机我有macOS运行，升级了Safari，现在问题解决了。看到一些回复，似乎表明该问题已在Safari 10.1中得到解决

.results-modal {
    @media all and (max-width: 1250px) {
        max-width: 95%;
    }
    max-width: 1200px;

    .modal-content {

        .modal-body {
            // padding: 0;
            margin-left: 13px;
            margin-right: 13px;

            .results-bq-cuts {
                .col {
                    padding:2px;
                }

                .cuts-btn {
                    font-size: 11px;
                    padding: 3px;
                    width: 100%;
                    box-shadow: none;
                }

                .cuts-btn-active {
                    font-size: 11px;
                    padding: 3px;
                    width: 100%;
                    background-color: $croner-blue;
                    box-shadow: none;
                } 

                h5 {
                    text-align: left;                
                }

                hr {
                    margin-top: 5px;
                    margin-bottom: 5px;
                }
            }
        }
    }
}