Question

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

CHROME：http://i60.tinypic.com/37l3b.jpg

MOZILLA：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%，但这是铬合金容器的100％，这意味着图片大约为87px。

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

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

将其设为height:auto

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

1 个答案: