Question

我正在为我的客户建立一个网站，但我似乎无法弄清楚为什么证词框在Firefox中显示但在Chrome中没有显示。见下图：

容器的CSS（至少我认为是）：

.testimonial p {
background: -moz-linear-gradient(center top , #F8F8F8, #FAFAFA) repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #DDDDDD;
font-weight: 500;
margin: 0;
padding: 27px 25px;
color: #222222;
border-radius: 3px;
line-height: 1.7;

}

这是HTML：

<div class="testimonials-carousel slide animate_afr d5 animate_start"
 id="testimonials-carousel">
<div class="carousel-inner">
    <div class="item">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="testimonial item">
                <p>"Testimonial here"
                </p>

                <div class="testimonials-arrow">
                </div>
                <div class="author">
                    <div class="testimonial-image "><img
                            src="images/team-member-1.jpg" alt=""></div>
                    <div class="testimonial-author-info">
                        <a style="cursor: pointer;">Marty Limena</a> Fancy Craft
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="item active">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="testimonial item">
                <p>"Testimonial Here"
                </p>

                <div class="testimonials-arrow">
                </div>
                <div class="author">
                    <div class="testimonial-image "><img
                            src="images/team-member-2.jpg" alt=""></div>
                    <div class="testimonial-author-info">
                        <a href="#">Robina Delaline</a> Pandamonium
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="testimonial item">
                <p>"Testimonial Here"
                </p>

                <div class="testimonials-arrow">
                </div>
                <div class="author">
                    <div class="testimonial-image "><img
                            src="images/team-member-3.jpg" alt=""></div>
                    <div class="testimonial-author-info">
                        <a style="cursor: pointer;">Marcos Bitolan</a>
                        Deep Dish Gaming
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

因为您已使用-moz-linear-gradient作为背景，这是一个特定于Mozilla（Firefox）的属性。

您应该使用实际的linear-gradient CSS属性，-moz-linear-gradient作为后备：

background: -moz-linear-gradient(center top , #F8F8F8, #FAFAFA) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: linear-gradient(center top , #F8F8F8, #FAFAFA) repeat scroll 0 0 rgba(0, 0, 0, 0);

推荐容器在Firefox中显示但不在Chrome中显示

1 个答案: