为什么 react-sparklines 图表在 Firefox 上的呈现方式与在 chrome 上的不同？答案

【问题标题】：Why is react-sparklines chart rendered differently on firefox than on chrome?为什么 react-sparklines 图表在 Firefox 上的呈现方式与在 chrome 上的不同？
【发布时间】：2017-09-29 18:51:01
【问题描述】：

我正在使用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 Tools 检查了迷你图。结果如下：

火狐 -

铬-

该项目仅使用 Bootstrap，没有使用其他 CSS。对于此特定表，仅使用 table 和 table-hover 类。那么，为什么即使width 和height 在两者上都保持不变，图表在 Firefox 上的呈现方式与在 Chrome 上的呈现方式不同？我该如何解决？

【问题讨论】：

标签： css reactjs google-chrome firefox

【解决方案1】：

这看起来像 Stephen Grider 的 React 课程，非常出色，我建议你全部完成，尤其是 GraphQL 和 JWT auth 课程。

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

如果我没记错的话，是 SVG 图形上的一些 CSS 赋予了它正确的样式。之后我玩了 Sparklines，我注意到它有一种我可能称之为不稳定大小的倾向，所以我怀疑这是让 CSS 正确的问题。

我现在正在查看我的项目，尝试将其放入 CSS 中：

svg {
    height: 150px;
}

【讨论】：