css 图标位置不适用于 mozilla firefox

Question

图标位置在 chrome 上工作正常。但在 mozzilla 上，图标从该位置移动。问题是，如何将此代码实现到 mozilla firefox？ chrome 或 mozzilla 有区别吗？ css代码如下

.searchbar-1{
          
          float: right;
          width: 300px;
          vertical-align: middle;
          white-space: nowrap;
          position: relative;
          margin-right: 120px;
          margin-top: -4px;
        }
        .searchbar-1 input#search{
          width: 300px;
          height: 40px;
          background: #E6E7E9;
          border: none;
          font-size: 10pt;
          font-style: italic;
          float: left;
          color: #63717f;
          padding-left: 45px;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
        }
        
        .searchbar-1 input#search::-webkit-input-placeholder {
           color: #65737e;
        }
         
        
         
        .searchbar-1 input#search:-ms-input-placeholder {  
           color: #65737e;  
        }
        
        .searchbar-1 .icon{
          position: absolute;
          top: 0%;
          margin-left: 12px;
          margin-top: 9px;
          z-index: 1;
          color: black;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="searchbar-1">
                <span class="icon"><i class="material-icons" (click)="applyFilterCustom(search)">search</i></span>
                <input type="text" [(ngModel)]="search" id="search" placeholder="Where would you like to go next?" name="search" (keyup.enter)="applyFilterCustom(search)" />
    </div>

Answer 1

无论何时使用 position: absolute;，您都必须定义位置。在您的情况下，您定义了 top 位置，但没有定义 left 或 right，因此根据您的要求，您必须定义其中任何一个。这将解决您的浏览器问题。

css 图标位置不适用于 mozilla firefox

css icon position not work on mozilla firefox

html

css

mozilla