0

我有以下在 IE8 中运行良好的代码。jquery 代码将项目添加到多选列表中。但在 Chrome 和 Safari 中，这不起作用 - 项目不可见

注意：虽然它在 Firefox 中有效，但它是向右对齐的。当我选择任何选项时，它会被隐藏。

我们怎样才能让它在所有四种浏览器中都能正常工作？

jsFiddle：http: //jsfiddle.net/Lijo/UPR8K/

代码

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
    $(function () {
        $("#btnCostPageNumberMagnifingLens").click(function () {

            $("#mtxtCostPageDescription").append('<option value=1>My option</option>');

        });
    });
    });
</script>

<style type="text/css">

    .floaterleft
    {
        width:300px;
        height:300px;
        background-color:gray;
        padding:10px 10px 10px 10px;

    }

</style>

<body>
    <div class="floaterleft">
        <div class="headerTextBox">
            <input id="txtCostPageNumber" id="CostPageNumber" name="CostPageNumber" style="width: 240px; padding-right: 15px" type="text" value="" />
        </div>
        <div class="Magenifyingbtn, headerMagnifyButton">
            <input type="button" name="btnCostPageNumberMagnifingLens" id="btnCostPageNumberMagnifingLens" class="Magenifyingbtn">
        </div>

        <select id="mtxtCostPageDescription" name="mtxtCostPageDescription" multiple="multiple" style="width: 290px; padding: 10px 152px 0px 154px; float: right"></select>
    </div>
</body>
4

3 回答 3

6

问题在于选择样式

padding: 10px 152px 0px 154px;

这隐藏了选项

从元素的样式中删除了DEMO填充

于 2013-09-04T11:59:59.693 回答
1

您正在重复准备好文件。

$(document).ready(function () {
    $(function () {
于 2013-09-04T11:58:19.323 回答
0

我同意 Dipesh，此外，由于以下原因，这些元素被隐藏了

padding: 10px 152px 0px 154px;

在元素样式属性中。Chrome 和 Firefox 正在（正确地）将填充应用于元素。

Padding 将定义其自身与其内容之间的空间，而 margin 将定义其自身与其父对象之间的空间。

jsFiddle

搜索 Google 以获取有关 CSS 框模型的更多信息：Google

于 2013-09-04T12:09:31.123 回答