Question

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

注意：虽然它适用于Firefox，但它正在向右对齐。当我选择任何选项时，它会被隐藏。

我们如何让它在所有四种浏览器中运行？

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

CODE

<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>

Answer 1

问题在于选择风格

padding: 10px 152px 0px 154px;

这隐藏了选项

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

Answer 2

您正在重复准备文档。

$(document).ready(function () {
    $(function () {

Answer 3

我同意Dipesh，此外，因

而隐藏了元素

padding: 10px 152px 0px 154px;

元素样式属性中的

。 Chrome和Firefox（正确地）将填充应用于元素。

填充将定义自身与内容之间的空间，而边距将定义自身与其父之间的空间。

jsFiddle

在Google上搜索有关CSS Box模型的更多信息：Google

添加要选择的项目在Chrome中不起作用

3 个答案: