0
我在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 Web瀏覽器（仿真器中的4.0.3和4.2），以及iOS 6和計算機（測試過的Firefox和Chrome瀏覽器）的更高版本都可以正常工作。Android網絡瀏覽器：菜單選項不會彈出
在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;
}