Проблема CSS в Firefox / Edge: большое изображение внутри div, размеры div остаются большими - PullRequest
Новая
       31

Проблема CSS в Firefox / Edge: большое изображение внутри div, размеры div остаются большими

0 голосов
/ 07 сентября 2018

Будучи новичком в CSS и проведя много исследований по моей проблеме, я обращаюсь. Я уверен, что это что-то простое, что мне не хватает.

Я создаю приложение Angular и всегда тестирую на Chrome (больше никогда). У меня есть главное меню с иконками и использую flexbox, они отлично позиционируются в Chrome. В Firefox и Edge содержимое div изображения остается большим

Вот несколько картинок, чтобы лучше описать проблему.

CSS problem on firefox, but not on chrome

Код: 

// Top Menu CSS
    :host {
      display: flex;
    }

    //app-basic-button CSS
    :host {
      display: flex;
      justify-content: center;
      align-items: center;
      .button-container{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70%;
        margin-left: 1vh;
        &:hover {
          background: $grey3;
        }
        &:active {
          background: $grey2;
        }
        img {
          height: 70%;
          z-index: 10;
          
          //mixin -> user-select:none;
          @include removeSelection(); 
          
          padding-left: 0.5vh;
          padding-right: 0.5vh;
        }
      }
    }
// Top Menu Component HTML
<div class="image-wrapper"><img [src]="this.logoSrc" alt="logo-image"></div>
<app-basic-button [imageKey]="'new-tree.png'"></app-basic-button>
... other buttons here...
    
// app-basic-button Component HTML
<div class="button-container">
<img [src]=pathToImage >
</div>

Будем весьма благодарны за любые другие комментарии или предложения по моему коду.

...