Question

我遇到问题a web page I'm developing, a Price Per Unit Calculator（在HTML，CSS和JavaScript / jQuery中）：在Android 2.3.3默认Web浏览器中查看时，页面顶部附近的菜单，单位类型和显示单元，没有弹出（让用户从菜单中选择一个项目）。 Android模拟器和运行2.3.3的Android手机都会出现此问题。这些菜单适用于我测试的Android网页浏览器的后期版本（模拟器中的4.0.3和4.2），以及iOS 6和计算机（测试的Firefox和Chrome浏览器）。

在Android 2.3.3网络浏览器中，当点击菜单时，彩色矩形应突出显示网页上的菜单，然后菜单选项会弹出屏幕上的列表。在我的网页上，对于靠近页面顶部的那些菜单，矩形出现（比点击的菜单宽），但是当它到达菜单所在的div（行）的底部时似乎停止了，并且没有菜单选项弹出;看this screenshot中的橙色矩形。网页下方的菜单工作正常。

这是简化的HTML：

<div class="header">
    <div class="global">
        <div id="unitTypeDiv" class="options col1 unit"><!-- left column-->
                <label for="unitType" class="label">Unit type</label><br>
    <select name="unitType" id="unitType" class="unitType_input" title="Unit type">
                    <option value="weight">weight</option>
                    <option value="volume">volume</option>
                    <option value="length">length</option>
                    <option value="area">area</option>
                </select>
            </div>

            <div id="displayUnitDiv" class="options col2 unit"><!-- center column-->
                <span id="displayUnitLabel"><label for="displayUnit" class="label">Display unit</label><br></span>
                <select name="displayUnit" id="displayUnit" class="displayUnit_input unit_input" title="Display unit">
                    <option value="oz">oz</option>
                    <option value="lb">lb</option>
                </select>
            </div>
        </div>   <!-- .global -->

    </div> <!-- .header -->
    <div id="products">

        <form method="post" name="priceper" id="priceper">

            <div class="product" id="product_0">
                <div class="name">
                    <label for="name_0" class="label"><span>Product 1:</span> Name<br></label>
                    <input name="name_0" type="text" id="name_0" title="Product 1">
                </div>
                <div class="unit row">
                    <label for="unit_0" class="label">Unit</label><br>
                    <select name="unit_0" id="unit_0" class="unit_input product_unit_input" title="Please choose a unit"> <!--replace with select (pop-up menu)-->
                        <option value="oz">oz</option>
                        <option value="lb">lb</option>
                    </select>
                </div>

            </div> <!--product_0-->

        </form>

    </div> <!-- products -->

编辑：这是CSS：

body {
    background-color: #ddd;
    color: #222;
    font-family: Helvetica; 
    margin: 0;
    padding: 0;
}

/* HEADER STYLES */
    .header {
        position:fixed; /* Keep header (title) at top of page always */
        top: 0;
        width: 100%;
        z-index:99998; /* Bring to front */
        /*border: 1px dashed red;*/
    }
    .header h1 {
        padding: 0;
        text-align: center;
        text-shadow: 0px 1px 0px #fff;
        /*background-image: -webkit-gradient(linear, left top, left bottom, 
                                           from(#ccc), to(red));*/ /* iPhone linear shading; not working*/
        /*border: 1px dashed red;*/
        margin-top: -3px;
        margin-bottom: -3px;
        background-color: #ccc;
        padding-top: 5px;
        padding-bottom:3px;
        text-align: center;
        border-bottom: 1px solid #666;
    }
    .header h1 a {
        color: #222;
        display: block;
        font-size: 20px;
        font-weight: bold;
        text-decoration: none;
    }
    .global {
        /*border: 1px dashed red;*/
        background-color: #eee; /* Background color */
        height: 43px;
        padding-top: 0px;
        z-index: 9999;
        /*border-bottom: 1px solid #666;*/
    }
    .col1 {     /* Unit type menu */
        float: left;
        margin-left: 5px;
        /*border: 1px dashed red;*/
    }
    .col2 {     /* Display unit menu */
        float: none;
        overflow: hidden;
        text-align:center;
        /*display: table-cell;*/
        /*border: 1px dashed green;*/
        position: absolute;
        /* center on browser window: put left at 50%, then offset left (margin-left) by half the width (half of 30% = 15%) */
        width: 50%;
        position: absolute;
        left: 50%;
        margin-left: -25%;
    }

/* PRODUCT STYLES */
    .product {
        padding-top: 2px;
        padding-bottom: 3px;
        padding-left: 5px;
        padding-right: 5px;
        background-color: #DCDCDC;
        border-bottom: 1px solid #999999;
        color: #222222;
    }
    #product_0 {
        margin-top: 100px;
    }

Answer 1

显然，Android 2.3.3网络浏览器不喜欢div上的最后一个CSS属性margin-top #product_0，低于问题菜单所在的那个。只需将属性更改为工作padding-top：

    #product_0 {
        padding-top: 100px;
    }

Here's the resulting web page (full version rather than simplified code).

Android网络浏览器：菜单选项不会弹出

1 个答案: