移动网页设计 HTML ul 在旋转设备时影响下方的图像

Question

您好，我的网站有问题。它在计算机上运行良好，但在移动设备上我使用的价格 table 影响了它下面的图像。价格 table 在一个 ul class 以内，当我看下面的图片时，它是纵向的，然后切换到横向，图像消失了。如果我取出所有价格 tables 图像将在手机上旋转并且不会消失。所以我知道 ul class 正在影响图像，但我不知道如何修复它。

    <ul class="pricing_table">

            <li class="price_block">
            <h3><h3>Mini Facial </h3></h3>

            <div class="price">
                <div class="price_figure">
                    <span class="price_number">&pound; 15</span>
                    <span class="price_tenure">30 minutes</span>
                    <span class="price_tenure">All Skin Types</span>

                </div>
            </div>  

        </li>

        <li class="price_block">
            <h3><h3>Facial</h3></h3>

            <div class="price">
                <div class="price_figure">
                    <span class="price_number">&pound; 24</span>
                    <span class="price_tenure">1 Hour</span>
                    <span class="price_tenure">All Skin Types</span>

                </div>
            </div>  
        </li>

        <li class="price_block">
            <h3><h3>Back Facial</h3></h3>

            <div class="price">
                <div class="price_figure">
                    <span class="price_number">&pound; 26</span>
                        <span class="price_tenure">30 minutes</span>
                        <span class="price_tenure">All Skin Types</span>
                </div>
            </div>  

        </li>


</ul>

    <a name="barbering"></a>
                        <section class="photo5" data-stellar-background-ratio="0.5">
                    </section>

css

    @import url(http://fonts.googleapis.com/css?family=Ubuntu);

    * {
        margin: 0; 
        padding: 0px;
    }

    body {
        font-family: Ubuntu, arial, verdana;

    }

    .pricing_table {
        line-height: 150%; 
        font-size: 12px; 
        margin: 1px auto; 
        width: 75%; 
        max-width: 800px; 
        padding-top: 10px;
        margin-top: 50px;

    }

    .price_block {
        width: 100%; 
        color: #8bbab4; 
        float: left; 
        list-style-type: none; 
        transition: all 0.25s; 
        position: relative; 
        box-sizing: border-box;

        margin-bottom: 10px; 
        border-bottom: 1px solid transparent; 
    }

    .pricing_table h3 {
        text-transform: uppercase; 
        padding: 5px 0; 
        background: #FFFFFF; 
        margin: -10px 0 1px 0;
    }

    .price {
        display: table; 
        background: #FFFFFF; 
        width: 100%; 
        height: 70px; 
    }
    .price_figure {
        font-size: 24px; 
        text-transform: uppercase; 
        vertical-align: middle; 
        display: table-cell;
    }
    .price_number {
        font-weight: bold; 
        display: block;
    }
    .price_tenure {
        font-size: 11px; 
    }

    .features {
        background: #8bbab4; 
        color: #8bbab4;
    }
    .features li {
        padding: 8px 15px;
        border-bottom: 1px solid #8bbab4; 
        font-size: 11px; 
        list-style-type: none;
    }

    .footer {
        padding: 15px; 
        background: #8bbab4;
    }
    .action_button {
        text-decoration: none; 
        color: #8bbab4; 
        font-weight: bold; 
        border-radius: 5px; 
        background: linear-gradient(#8bbab4, #8bbab4); 
        padding: 5px 20px; 
        font-size: 11px; 
        text-transform: uppercase;
    }
    .price_block:hover {
        box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5); 
        transform: scale(1.04) translateY(-5px); 
        z-index: 1; 
        border-bottom: 0 none;
    }
    .price_block:hover .price {
        background:linear-gradient(#8bbab4, #8bbab4); 
        box-shadow: inset 0 0 45px 1px #FFFFFF;
    }
    .price_block:hover h3 {
        background: #222;
    }
    .price_block:hover .action_button {
        background: linear-gradient(#8bbab4, #8bbab4); 
    }

    @media only screen and (min-width : 480px) and (max-width : 768px) {
        .price_block {width: 50%;}
        .price_block:nth-child(odd) {border-right: 1px solid transparent;}
        .price_block:nth-child(3) {clear: both;}

        .price_block:nth-child(odd):hover {border: 0 none;}
    }
    @media only screen and (min-width : 768px){
        .price_block {width: 25%;}
        .price_block {border-right: 1px solid transparent; border-bottom: 0 none;}
        .price_block:last-child {border-right: 0 none;}

        .price_block:hover {border: 0 none;}
    }

.photo5{
background: url(barbering.jpg);
    background-size: cover;
    width: 100%;
    height: 550px;
    top: 48px;
    overflow: auto;
    background-repeat: no-repeat; 
}

Answer 1

这不是 ul 的错，是视差插件。当您向下滚动纵向视图时，它会使用 javascript 将背景位置更改为某个值。然后将设备旋转到横向，即使从页面顶部到带图片的容器的距离发生变化，插件设置的值仍然相同。

移动网页设计 HTML ul 在旋转设备时影响下方的图像

Mobile web design HTML ul affecting image below it when rotating device

html

css

mobile

html-lists