IE11 que não respeita a altura: auto

Question

IE11 que não respeita a altura: auto

No Internet Explorer 11, Em https://www.superiorit.com.au, o ícone" S control " no canto superior direito mostra com height: 94px;

tal como especificado na marca img:

<img src="https://www.superiorit.com.au/wp-content/uploads/2017/11/new_connect_logo_web_normal.png" width="375" height="94" srcset="https://www.superiorit.com.au/wp-content/uploads/2017/11/new_connect_logo_web_normal.png 375w, https://www.superiorit.com.au/wp-content/uploads/2017/11/new_connect_logo_web_normal-300x75.png 300w" sizes="(max-width: 375px) 100vw, 375px" class="so-widget-image">

mas o CSS height: auto;em:

.so-widget-sow-image-default-eef982a7180b .sow-image-container .so-widget-image {
    display: inline-block;
    max-width: 100%;
    width: inherit;
    height: auto;
}

não está a ser respeitado pela IE11. O Chrome respeita este CSS e reduz a altura do img para 25px de altura:

Como faço para que o IE11 mostre a imagem @ 25px de altura?

2

internet-explorer-11 css3

Author: Steve, 2017-11-20

Source

4 answers

score 3 · Answer 1

Remover o estilo display: inline-block de #siteorigin-panels-builder-9 (o contentor .widget para os elementos de topo.

Isto está a interferir com a disposição algo frágil que combina as larguras flutuantes, flexbox e calc().

score 2 · Answer 2

Remover width="375" height="94" de img Marca

<img src="https://www.superiorit.com.au/wp-content/uploads/2017/11/new_connect_logo_web_normal.png" srcset="https://www.superiorit.com.au/wp-content/uploads/2017/11/new_connect_logo_web_normal.png 375w, https://www.superiorit.com.au/wp-content/uploads/2017/11/new_connect_logo_web_normal-300x75.png 300w" sizes="(max-width: 375px) 100vw, 375px" class="so-widget-image">

E fazer width: 100%

.so-widget-sow-image-default-eef982a7180b .sow-image-container .so-widget-image {
    display: inline-block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

score 0 · Answer 3

Adicionar altura máxima: 30px

.so-widget-sow-image-default-eef982a7180b .sow-image-container .so-widget-image {
  display: inline-block;
  height: auto;
  max-width: 100%;
  width: inherit;
  max-height:30px
}

score 0 · Answer 4

Pode utilizar IE CSS específico , IE 11 o CSS suportado é:

*::-ms-backdrop,

Outra coisa que tens de fazer é remover o atributo inline height e width de img tag. Você tem que colocar max-height na sua classe css. Então o seu código deve ser como

*::-ms-backdrop,.so-widget-sow-image-default-eef982a7180b .sow-image-container .so-widget-image {
  display: inline-block;
  height: auto;
  max-width: 100%;
  width: inherit;
  max-height:30px
}

Espero que isto te ajude.