なぜ反応火花線図は、firefox上ではchrome上とは異なってレンダリングされますか？

Question

私はreact-sparklinesを使用して、特定都市の5日間の気象データのグラフを描画しています。

これは私のために、各都市のユーザー検索を気象データを表示するコンテナ（まだ不完全）と反応 -

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); 

そして、私はそれぞれの幅と高さを述べる特定measuresmentsを与えてくれましたスパークラインチャート - それはそれはクロムでレンダリングされたときの測定値が右に見える一方で

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

はしかし、チャートは完全にFirefoxの上の割合の外にあります。

トップ1はクロームで、Firefoxは以下の通りです - - ここではスクリーンショットです

次に、私は、FirefoxとChromeの両方に開発ツールを反応させるのでスパークラインチャートを視察しました。 -

クローム

プロジェクトが唯一のブートストラップを使用し、無他のCSS

のFirefox：ここでの結果です。この特定の表では、tableとtable-hoverクラスのみが使用されています。だから、なぜwidthとheightが両方で一定であっても、Chrome上でのチャートとFirefox上でのチャートの表示が異なるのはなぜですか？どうすれば修正できますか？

Answer 1

これはStephen GriderのReactに関する講座のように見えますが、これは非常に優れており、特にGraphQLとJWTの認証をすべてお勧めします。

彼のプロジェクトが正しく表示され、あなたのサイズが間違っているかもしれないという点では、小さな問題があります。ビデオシリーズの後半で、彼はそれを修正するいくつかのCSSを紹介します。

私が正しく思い出したのは、それが適切なスタイリングを与えるのはSVGグラフィックのCSSです。私はSparklinesで演奏していましたが、エラティックサイジングと呼ぶ傾向があることに気づいたので、CSSを正しいものにすることが重要です。

私は今、私のプロジェクトで探しています、CSSでこれを入れてみてください：

svg { 
    height: 150px; 
}