html - CSS Angular 简单形式在firefox上损坏

我正在开发一个angular 4应用程序。
我从一个简单的html表单开始，并在运行项目时自定义css，在chrome上一切正常，但在Firefox上css被修改并且所有输入均未组织。
这是我的html代码：

.RegisterTitle{
    padding-bottom: 5%;
    display:inline-flex;
    }

    .Retour{
        display: inline-flex; align-items: center;
    }

    .centrer {
        margin: 0 auto;
        width: 50%;
        background-color: white;
        height: 100%;
        padding-top: 4%;
        padding-left: 5%;
        padding-right: 5%;
    }
    body{
        background-color: #ddd;
    }
    .page {
        background-color:#ddd;}


    .al-blue{

     color:red;
    }

    .form-control{
        width: 130%;

    }
    .btn{
        width: 130%;
    }
    .g1{
        max-width: 80%;
        display: inline-block;
        margin-right: 20%;
    }
    .field-icon {
      float: right;
      margin-left: -25px;
      margin-top: -25px;
      position: relative;
      z-index: 2;
    }
    form{
        margin-left: 5%;
        margin-right: 5%;
    }
    .g2{
        max-width: 80%;
        display: inline-block;
        margin-right: 20%;
    }

    .btn-al-blue{

       background-color: red;
        color: white;
    }

    .lien {
        text-decoration: underline;
    }

    .bottom {
        margin-top: 12%;
    }

    .top {
        margin-top: 10%;
    }

    .errColor {
        color: red;
    }
    .iconColor {
        color: #328DF3;
        margin-right: -2%;
    }

     <div class="centrer">
    <div style="padding-bottom: 5%; display:inline-flex">
      <h4 class="al-blue">Add form</h4>
      <a  style="padding-left: 120%;padding-top: 3%" >

       <div style="display: inline-flex; align-items: center;"> <i class="fas
         fa-angle-left"></i> Cancel</div>

        </a>
      </div>

      <form  #signInForm="ngForm">

        <div class="form-group  g1 al-blue">
          <label for="text">Name society </label>
          <input type="text" name="nomcompte" ngModel required  class="form-
       control">
        </div>
        <div class="form-group g1 al-blue">
            <label for="text">Langue</label>
            <select class="form-control" name="langue">
                <option   > fr </option>
                <option  > an </option>
              </select>
          </div>
          <div style="padding-bottom: 2%;margin-top: 3%; display:inline-flex">
              <h5 class="al-blue">Account</h5>
            </div><br/>

        <div class="form-group g2 al-blue">
          <label for="text">first name </label>
          <input type="text" name="nomuser" required  class="form-control"

        >

        </div>
        <div class="form-group g2 al-blue">
          <label for="text">Last name</label>
          <input type="text" name="prenomuser" ngModel required  class="form-

         control"

             >

        </div>
        <div class="form-group g1 al-blue">
          <label for="text">mail</label>
          <input type="text" name="mail" ngModel required  class="form-control"

                  >

        </div>
        <div class="form-group g1 al-blue">
          <label for="text">numphone</label>
          <input type="tel" name="numphone" ngModel   class="form-control">

        </div>
        <div class="form-group  g1 al-blue">
          <label for="password">Mot de passe</label>
          <input type="password" class="form-control" name="password" ngModel
      required >
        </div>
        <div class="form-row bottom">

          <div class="form-group">
            <div style="width:65%;">
                <button  type="submit" class="btn btn-al-blue"
        [disabled]="!signInForm.form.valid">enregistrer</button>

          </div>
          </div>
        </div>

      </form>
  </div>

这些是关于我在chrome和firefox上看到的图像的两张图片：

最佳答案

在Firefox上，使用Firebug进行检查，并与chrome检查类进行比较。您的CSS尚未加载或某些类未加载。

关于html - CSS Angular 简单形式在firefox上损坏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49646271/