Поля для элемента различаются в IE и Chrome - PullRequest
Новая
       26

Поля для элемента различаются в IE и Chrome

1 голос
/ 13 марта 2020

Я создал кнопку на карте, поля которой отлично работают с chrome, но она изменяется в IE -11 при тестировании. Как я могу написать CSS код, который работает для обоих браузеров? Ниже я прилагаю снимок того, что я создал, а также код. это класс ".btn-Secondary", когда я проверяю его в IE и удаляю "margin-top", он работает. Но тогда он портит мой chrome

Снимок экрана Chrome

снимок экрана IE

@import 'penske-colors';
@import 'typography';

.cap-header {
  margin-top: 16px;
  margin-bottom: 16px;
}

.card {
  margin-right: 24px;
  cursor: pointer;
}

.globe-icon {
  display: inline-block;
  margin-bottom: 16px;
}

.selected-icon {
  fill: $gray-110-hex;
  display: inherit;
  width: 15.2px;
  height: 15.2px;
  margin-right: 10px;
  margin-top: -2px;
}

.selected-type {
  border: 2px solid $rb-100-hsla;

  .btn-secondary{
    box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.58);
    background: $gray-170-hex;
    color: $gray-80-hex;
    fill: $gray-80-hex;
  }
}

h5{
  margin-bottom: 10.5px;
}
.service-card {
  margin-bottom: 16px;
  padding-top: 16px;
  padding-left: 16px;
  padding-right: 32px;
  padding-bottom: 100px;
  height: 136px;
  width: 258px;
}
.btn-secondary{
  margin: auto;  
  display: inline-flex;
  height: 36.27px;
  padding-bottom: 9px;
  padding-top: 7px;
  padding-right: 7px;
  padding-left: 7px;
}

.service-desc {
  margin-bottom: 16px;
}

.service-header {
  margin-bottom: 4px;
}

.unit-type-card {
  margin-bottom: 24px;
  text-align: center;
  width: 164px;


  .btn-secondary{
    height: 32px;
    margin-bottom: 16px;
  }
}
<h5 class="text-preset-5"
  [ngClass]="{ 'service-desc' : !isService }"
  *ngIf="capability?.description">{{ capability?.description }} </h5>
  <div interactive>
  <button type="button" class="text-preset-6 btn btn-secondary" >
    <app-inline-svg 
    *ngIf="isSelected" 
    class="selected-icon" 
    iconName="Check-circle-solid-empty" 
    size="20"></app-inline-svg>{{text}}</button>
  </div>
...