Край неправильно отображает надписи над полями ввода? - PullRequest
Новая
       5

Край неправильно отображает надписи над полями ввода?

0 голосов
/ 08 ноября 2018

Надписи над моими полями ввода отображаются правильно в Chrome, как показано ниже:

enter image description here

Однако вот как они отображаются в Edge:

enter image description here

Как сделать так, чтобы стиль в Edge был таким же, как в Chrome?

HTML: 

 <section style={{backgroundImage: `url(/static/images/loginBackground.jpg)`, backgroundSize: 'cover', overflow: 'hidden', height:'100%', margin: '0'}}>
        <div className="container">
          <div className="row">
            <div className="col-4 offset-4" style={{textAlign: 'center'}}>
              <img style={{height: "auto", width: "auto", maxWidth: "300px", maxHeight: "200px", paddingTop: "15px" }} src="/static/images/xxx.png" />  
            </div>
          </div>
          <div className="card card-login mx-auto mt-5">
            <div className="card-header">Login</div>
            <div className="card-body">
              <form onSubmit={this.submit}>
                <div className="form-group">
                  <div className="form-label-group">
                    <input type="text" id="inputemailAddress" className="form-control" required="required" onChange={(e) => this.setState({ emailAddress: e.target.value })} value={this.state.emailAddress}></input>
                    <label htmlFor="inputemailAddress">Email</label>
                  </div>
                </div>
                <div className="form-group">
                  <div className="form-label-group">
                    <input type="password" id="inputPassword" className="form-control" required="required" onChange={(e) => this.setState({ password: e.target.value })} value={this.state.password}></input>
                    <label htmlFor="inputPassword">Password</label>
                  </div>
                </div>
                <div className="form-group">
                  <div className="form-label-group">
                    <input type="text" id="twofacode" className="form-control" required="required" onChange={(e) => this.setState({ twoFACode: e.target.value })} value={this.state.twoFACode}></input>
                    <label htmlFor="twofacode">2FA Code</label>
                  </div>
                </div>
                {(this.state.loginFailure) && <div className='mx-auto' style={{paddingLeft: '80px'}}>{this.state.loginFailureError}<br/><br/></div>}
                <button type="submit" className="btn btn-primary btn-block" value='Login'>Login</button>
              </form>
              <div className="text-center">
                {/* <Link to='/register'>Register an Account</Link> */}
                <br/>
                <Link to='/forgotPassword'>Forgot Password</Link>
              </div>
            </div>
          </div>
        </div>
      </section>

CSS:

CSS

...