Question

我使用Rekit和ant design创建了响应式Web应用程序。在Chrome和Firefox（仅适用于功能）中，该应用程序很好地工作，例如在Chrome登录页面中，Chrome的预期输出是示例，但Firefox的风格将会改变

这是我的代码

<div><Col  xs={24} sm={24} md={24} lg={24} xl={24}>
<Card  style={{height:320 , boxShadow: '0px 14px 37px -5px rgba(66,61,61,0.67)' }}>

        <img  className="logo" src={require("../../../img/logo.png")} style={{height:80, width:80}}/>
        <p  style={{ color: '#036cd2', fontSize: 26 }}> Leave Management System</p>
        <Form onSubmit={this.handleSubmit} className="login-form" >
        <FormItem  {...formItemLayout}>
        {getFieldDecorator('userName', {
        rules: [{ required: true, message: 'Please input your username!' },
        ],
        username: this.state.username,

        })(
        <Input
        prefix={<Icon type="user" style={{ color: '#036cd2', fontSize: 16 }} />}
        placeholder="Username"

        />
        )
        }
        </FormItem>
        <FormItem {...formItemLayout}>
        {getFieldDecorator('password', {
        rules: [{ required: true, message: 'Please input your Password!' }],

        password: this.state.password,
        })(
        <Input prefix={<Icon type="lock" style={{ color: '#036cd2', fontSize: 16 }} />} type="password"  placeholder="Password" />
        )}
        </FormItem>
        <FormItem>
        <Button type="default" htmlType="submit" className="login-form-button" style={{ width: 90, textAlign: 'center', backgroundColor: '#036cd2', color: '#ffffff', left: 0 }} /* onClick={(event) => this.handleClick( event )} */ >

        Log in

        </Button>
        <a style={{ float: 'right',color: '#043051', fontSize: 16 , paddingTop: 5  }} className="login-form-forgot" ><Link to="/mail-veri">Forgot password </Link></a>

       </FormItem>

        </Form>

</Card>
      </Col>

使用Antd在Firefox中更改样式

0 个答案: