html - woocommerce 缩略图在 chrome 和 mozilla 中具有不同的图像宽度

Question

您好，我最近遇到了一个奇怪的问题。我正在运行基于 bootstrap 3 构建的 Woocommerce 主题。我做了一些自定义 CSS 修改，图像缩略图在 Chrome 上显示得非常窄，在 Thunderbird 上显示得很好。有人可以帮我吗？我可能在这里遗漏了一些基本的东西......在你问之前，不，我没有运行任何扩展以下是图片:

Chrome :http://i60.tinypic.com/37l3b.jpg

摩斯拉:http://i57.tinypic.com/dmpjbn.jpg

CSS

.thumbcustom{
float:left;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
max-width:24% !important;
margin-left:7px;
}

和 HTML 文件:

                    <?php
            /**
             * Single Product Thumbnails
             *
             * @author      WooThemes
             * @package     WooCommerce/Templates
             * @version     2.3.0
             */

            if ( ! defined( 'ABSPATH' ) ) {
                exit; // Exit if accessed directly
            }

            global $post, $product, $woocommerce;

            $attachment_ids = $product->get_gallery_attachment_ids();

            if ( $attachment_ids ) {
                $loop       = 0;
                $columns    = apply_filters(  'woocommerce_product_thumbnails_columns', 3 );
                ?>
                <div class="thumbnails thumbcustom"><?php

                    foreach ( $attachment_ids as $attachment_id ) {

                        $classes = array( 'zoom' );

                        if ( $loop == 0 || $loop % $columns == 0 )
                            $classes[] = 'first';

                        if ( ( $loop + 1 ) % $columns == 0 )
                            $classes[] = 'last';

                        $image_link = wp_get_attachment_url( $attachment_id );

                        if ( ! $image_link )
                            continue;

                        $image       = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ) );
                        $image_class = esc_attr( implode( ' ', $classes ) );
                        $image_title = esc_attr( get_the_title( $attachment_id ) );

                        echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">%s</a>', $image_link, $image_class, $image_title, $image ), $attachment_id, $post->ID, $image_class );

                        $loop++;
                    } ?>
                </div>
                <?php
            }

Answer 1

不得不覆盖默认样式是我讨厌 Bootstrap 的原因之一......

图像 HTML 的宽度/高度为 180px180px...但是图像的父容器之间存在冲突

woocommerce-layout.css

#single-product div.thumbnails a {
    width: 100%;
}

.woocommerce #content div.product div.thumbnails a, .woocommerce div.product div.thumbnails a, .woocommerce-page #content div.product div.thumbnails a, .woocommerce-page div.product div.thumbnails a {
   width: 30.75%; 
}

将此设置为这也将解决您在 FF 中遇到的问题...

#single-product div.thumbnails a {
    width: calc(25% - 2px); //2px compensate for border Doesn't support IE8
}

然后图像有一个 max-width 100% 但在 chrome 中这是 100% 的容器，这转化为图像的大约 87px。

然后你有一个固定的高度设置为 112px 这使得它不成比例template.css

#single-product div.thumbnails a .attachment-shop_thumbnail {
    height: 112px;
}

设置为height:auto