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?
4 answers
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()
.
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;
}
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
}
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.