get_the_post_thumbnail not displaying correctly in IE, but fine on FF and Chrome

Question

The thumbnails in this code are displaying correctly in FF and Chrome but in IE they are being displayed based on their ratio.

I have 50px set as the length and height and all the thumbnails are perfect squares in FF and Chrome. In IE however, because they are being re-sized based on some ratio, some thumbnails are appearing skinny while others are displaying correctly with the 50x50 dimensions. However, all the thumbnails are still within the 50x50 boundary, just that some are skinnier than the others.

function posts_in_cat( $atts ) {
$atts = shortcode_atts( array(
    'cat' => '',
), $atts );

if ( empty( $atts['cat'] ) ) {
    // If category provided, exit early
    return;
}

$args = array(
    'category' => $atts['cat'],
    // Disable pagination
    'posts_per_page' => -1
);

$posts_list = get_posts( $args );

if ( empty( $posts_list) ) {
    // If no posts, exit early
    return;
}

$opening_tag = '<ul style="list-style-type:none; padding-left:2px; display:block; clear:both;">';
$closing_tag = '</ul>';
$post_content = '';

foreach ( $posts_list as $post_cat ) {
    $post_content .= '<li class="highlightli" style="line-height:1.2em; margin-bottom:10px; display: flex !important; align-items: center !important;">' . get_the_post_thumbnail($post_cat->ID, array(50,50), array( 'class' => 'imgspecialalignleft' )) . '<a href="' . esc_url( get_permalink( $post_cat->ID ) )  . '">' . esc_html( get_the_title( $post_cat->ID ) ) . '</a></li>';
}

return $opening_tag . $post_content . $closing_tag;
}

Answer 1

The solution was to use width: auto; as one of the image properties.