1

我有一个我设置样式的下拉列表，但我仍然不明白为什么文本在 chrome 和 Firefox 中总是以不同的方式对齐。我尝试text-align:center;在我的css上添加，firefox使选择列表居中但不垂直居中，而在chrome中它并没有居中，但至少它的垂直对齐是居中的。这是它当前的输出（删除了文本对齐中心部分）：

火狐渲染： 在此处输入图像描述

铬渲染： 用于镀铬

到目前为止，这是我的 CSS 代码：

下拉列表的 div 容器：

.container {
 background-color:#424141;
 border:1px solid #424141;
 width:280px;
  height:40px;
  font-size:13pt;
  font-weight:bold;
  padding-right: -20px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

和下拉：

.dropdown  {
 background-color:#424141;
  border:1px solid #424141;
  position:absolute;
  color: #000000;
  width:280px;
  height:40px;
  font-size:13pt;
  font-weight:bold;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

这是添加text-align:center;下拉类后的结果：

结果 2

在 chrome 中，它与上面相同。

这是此的html代码。好吧，它在一张桌子里，我想我可以跳过另一部分：

<tr>
    <td><p class="titles">City</p></td>
    <td><div class="container"><select name="city" tabindex="16" class="dropdown">
        <?php foreach ($cities as $city1): ?>

            <option <?php echo "value='".$city1['city']."'"; if($city1['city']==$city){echo "selected='selected'";} ?>>
        <?php echo $city1['city']; ?>
            </option>

        <?php endforeach ?>
        </select></div></td>
</tr>
4

1 回答 1

2

您尝试做的事情不能使用 HTML/CSS 跨浏览器完成，因为 HTML/CSS 规范实际上并没有说明应该如何将 CSS 或样式应用于表单元素。实际上，您可以使用 javascript 编写自己的下拉列表：

html:

<div id="search_result_fake_container">
    <input id="search_result_fake" value="- All Categories -">
    <div id="search_result_fake_div"></div>
</div>
<div id="search_result_present_list">
    <div class="search_result_list_item" id="search_result_item_1" style="text-align:center;">item1</div>';
    <div class="search_result_list_item" id="search_result_item_2" style="text-align:center;">item2</div>';
    <div class="search_result_list_item" id="search_result_item_3" style="text-align:center;">item3</div>';
</div>

js：

<script type="text/javascript">
    $(document).ready(function () {
        $("#search_result_fake_div").live("click", function () {
            $("#search_result_present_list").show("fast");
        });

        $("#search_result_present_list").live("mouseleave", function () {
            $("#search_result_present_list").hide();
        });

        $(".search_result_list_item").live("click", function () {
            $("#search_result_fake").val($(this).html());
            $("#search_result_present_list").hide();
        });
    })
</script>

CSS：

#search_result_fake {
    -moz-box-sizing: border-box; /* for Firefox */
    -webkit-box-sizing: border-box; /* for Safari $ Chrome */
    box-sizing: border-box; /* for IE $ Opera */
    padding-left: 5px;
    width: 100%;
    font-size: 90%;
    outline: none;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    height: 100%;
}

#search_result_fake_div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    cursor: pointer;
}

#search_result_present_list {
    display: none;
    position: absolute;
    text-align: left;
    top: 85px;
    left: 65%;
    font-size: 90%;
    overflow: auto;
    background-color: #eae7e7;
    border: #6f6f6f solid 1px;;
    height: 190px;
    width: 23%;
    z-index: 4;
}

css 是复制粘贴，但我希望你明白我的意思

于 2012-11-02T08:53:54.023 回答