Question

我正在开发一个角度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上看到的两个图像：

Answer 1

使用firebug进行firefox检查，并使用chrome检查比较类。您的css未加载或某些类未加载。

Answer 2

您可以简单地使用它，但无论如何都不要使用这种代码，因为您需要更多结构化代码

＆＃13;

.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%;
    }

＆＃13;

     <div class="centrer">
    <div style="padding-bottom: 5%; display:inline-flex;position:relative;width:100%;">
      <h4 class="al-blue">Add form</h4>
      <a  style="position:absolute;top:17px;right:0" >
       
       <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>

＆＃13;

我建议你使用bootstrap或类似的

在Firefox上打破CSS角度简单的形式

2 个答案: