简体   繁体   English

get_the_post_thumbnail在IE中无法正确显示,但在FF和Chrome上却没问题

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

The thumbnails in this code are displaying correctly in FF and Chrome but in IE they are being displayed based on their ratio. 此代码中的缩略图在FF和Chrome中正确显示,但在IE中,它们是根据它们的比例显示的。

I have 50px set as the length and height and all the thumbnails are perfect squares in FF and Chrome. 我将50px设置为长度和高度,所有缩略图都是FF和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. 然而,在IE中,因为它们是基于某种比例重新调整大小,所以一些缩略图看起来很瘦,而其他缩略图正在以50x50尺寸正确显示。 However, all the thumbnails are still within the 50x50 boundary, just that some are skinnier than the others. 但是,所有缩略图仍然在50x50范围内,只是有些比其他缩略图更瘦。

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;
}

The solution was to use width: auto; 解决方案是使用width: auto; as one of the image properties. 作为图像属性之一。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM