为什么在firefox和chrome上呈现的react-sparklines图表是不同的？

Question

我正在使用react-sparklines绘制给定城市的5天天气数据图表。

这是我的React容器(尚未完成)，它显示用户搜索的每个城市的天气数据-

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Sparklines, SparklinesLine } from 'react-sparklines';

class WeatherList extends Component {
    constructor(props) {
        super(props);
        this.renderWeather = this.renderWeather.bind(this);
    }

    renderWeather(cityData) {
        const name = cityData.city.name;
        const temps = cityData.list.map(w => w.main.temp);
        console.log(temps);
        return (
            <tr key={name}>
                <td>{name}</td>
                <td> 
                    <Sparklines height={40} width={80} data={temps}>
                        <SparklinesLine color="red" />
                    </Sparklines>
                </td>
            </tr>
        )
    }


    render() {
        return (
            <table className="table table-hover">
            <thead>
                <tr>
                    <th>City</th>
                    <th>Temperature</th>
                    <th>Pressure</th>
                    <th>Humidity</th>
                </tr> 
            </thead>
            <tbody>
                {this.props.weather.map(this.renderWeather)}

            </tbody>


            </table>
        )
    }
}

function mapStateToProps(state) {
    return {weather: state.weather};
}

export default connect(mapStateToProps, null)(WeatherList);

而且，我已经给出了具体的测量方法，说明了每个迷你图的宽度和高度-

<Sparklines height={40} width={80} data={temps}>

然而，当它在chrome上呈现时，虽然测量结果看起来是正确的，但在Firefox上，图表却完全不成比例。以下是屏幕截图-

上面的是chrome，下面是Firefox -

​

​

接下来，我在Firefox和Chrome上使用React Dev工具查看了迷你图。结果如下：

Firefox -

​

铬合金-

​

该项目仅使用Bootstrap，而不使用其他CSS。对于这个特定的表，只使用了table和table-hover类。那么，为什么在火狐和Chrome上的图表呈现方式不同，即使两者的width和height都是恒定的呢？我怎么才能修复它？

Answer 1

这看起来像Stephen Grider关于React的课程，它非常优秀，我建议你做所有的，特别是GraphQL和JWT。

有一个小问题，他的项目显示正确，而您的项目可能有一个不正确的大小。在视频系列的后面，他介绍了一些修复它的CSS。

如果我没记错的话，是SVG图形上的一些CSS为它提供了适当的样式。之后我使用了Sparkline，我注意到它有一种倾向，我可以称之为一些错误的大小，所以我怀疑这是一个正确的CSS的问题。

我现在正在看我的项目，试着把这个放到CSS中：

svg {
    height: 150px;
}