Question

我正在处理这个website，它在Chrome和IE上显得很好。

问题在于明信片＆＃39;在Firefox中无法正确定位。

我试图通过使用前选择器将一半图像和一半白色背景添加到我的#postcard div来实现明信片效果。

HTML ：

<div id="postcard" class="grid">
    <div id="featured-content" class="grid col-300 text">
        <h1 class="featured-title">
            Footsteps Cottages
        </h1>
        <h2 class="featured-subtitle">
            Home From Home Holiday Cottages
        </h2>

    </div>

    <div id="postcardback" class="grid col-300 fit">
    <div class="stamps">
        <a href="/st-ives"><img class="size-medium wp-image-19" alt="stamp" src="/stamp2.png" width="100" height="100"></a>
    </div> <!--end of .stamps-->

<div class="postcard-lines">
    <div class="postcard-line">
        Three luxury, self-catering
    </div>
    <div class="postcard-line">
        holiday cottages - Flip Flops,
    </div>
    <div class="postcard-line">
        Sandals & Barefoot. Each 
    </div>
    <div class="postcard-line">
        just a walk away from the
    </div>
    <div class="postcard-line">
        stunning seaside in Downalong
    </div>
    <div class="final-postcard-line">
        <img class="size-medium wp-image-19" alt="_IK1_2595" src="/footsteps-kisses.png" width="280" height="100">
    </div>

</div><!--end of postcard-lines-->

CSS ：

    #postcard {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    width: 57.446808510638%;
    display: table;
    overflow:hidden;
    position: relative;
    word-wrap: break-word;
}

#postcard:before {
    position: absolute;
    content: "";
    background-color: white;
    z-index: -2;
    display: inline-block;
    width: 100%;
    height: 100%;
        background-size: cover;
}

#featured-content {
    position: relative;
    width: 50%;
}

#featured-content:before {
    content: "";
    display: inline-block;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url(/IK1_25931.jpg) no-repeat;
        background-size: cover;
    -webkit-filter: blur(1px);
}

我是HTML和CSS的新手（您可能已经猜到了），有人可以帮我解决这个问题，以便在Firefox中正确显示吗？

Answer 1

像这样修改你的css

#postcard:before {
    background-color: #FFFFFF;
    background-size: cover;
    bottom: 0;   // ---------------- Add this line
    content: "";
    display: inline-block;  // *************** Remove this line
    height: 100%;   // ************************ Remove this line
    left: 0;  // ---------------- Add this line
    position: absolute;
    right: 0;  // ---------------- Add this line
    top: 0;   //------------------ Add this line
    width: 100%;   // **************************  Remove this line
    z-index: -1;   // -----------  Add this line
}

Answer 2

只需在您的ID left:0伪类上添加以下#postcard:before。

#postcard:before {
left: 0; /*Add this line*/
}

使用和不使用left属性检查Firefox屏幕截图。

使用left:0 enter image description here

Firefox显示bug - ：选择器之前？

2 个答案: