Question

对于FireFox，我希望内容应该特别显示+和 - 按钮内嵌textarea内容增长和滚动条可见，就像它在Chrome 中工作（即使内容增长和滚动条可见，请参见图像＆＃39; - ＆＃39;按钮的图像是内嵌的）

通过添加

，它在Chrome中正常运行

display:inline-block

请检查下面附带的镶边图片。

但是当我在FF办理登机手续时，同样的事情就是

这是工作方案： - 没有滚动条内容特别是内联的 - ＆＃39; - ＆＃39;按钮

当内容增长时，内容会逐渐增加。

我尝试了大多数博客中提出的建议，例如添加

display: -moz-inline-stack;

对于FF，但没有一个有效。

HTML代码： -

<body>
    <div id='adding-app' title='Add New Xpath'>
        <div id='editor-app'></div>
            <form>
                <fieldset>
                    <div id='tue' title='Add Xpath'>
                        <div id='editor-xpath'></div>
                            <table id="ui-tableContent">
                                <tr>
                                    <td>
                                        <label for='app_name0'><b>Xpath Request :
                                        </b></label>
                                        <p id="demo"></p>
                                    </td>
                                    <td id="ui-xpath-list">
                                        <label for='app_name0'><b>Selected Xpaths :
                                        </b></label>
                                    </td>
                                </tr>

                                <tr id="ui-xpathtable">
                                    <div id="ui-newdiv">
                                        <td>
                                            <textarea id='Xpath' readonly></textarea>
                                        </td>
                                        <td id="ui-selected-xpath">
                                            <div class="input_fields_wrap">
                                                <div class="ui-xpathDiv">
                                                    <textarea id="xpathGrade" class="ui-xpath" type="text" name="mytext[]"></textarea>
                                                    <img class="add_field_button" src='images/new.png' width='16' height='16'/> 
                                                </div>
                                            </div>
                                        </td>
                                    </div>
                                </tr>
                            </table>
                    </div>
                </fieldset>
                <div id="dialog-message"></div>
                <div id="applicationerror" align="right"></div>
            </form>
    </div>
</body>

CSS代码： -

#Xpath{
    resize: none;
    width: 351px; 
    height: 349px;
}

#adding-xpath{
    overflow:hidden;
}

#ui-selected-xpath{
      border: 1px solid black;
      vertical-align:top;
}

#ui-selected-xpath img, #ui-selected-xpath textarea {
      display: inline-block;
      vertical-align: middle;
}

.add_field_button{
    position: relative;
    top:6px;
    right:-.5em;
}

.remove_field{
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    -moz-box-sizing: border-box;
} 

.ui-xpath{
      position: relative;
      resize: none;
      height: 2em;
      width: 20em;
}
.input_fields_wrap{
    max-height: 350px;
    overflow:scroll;
    overflow: auto;
}

.ui-xpathDiv{
      min-width: 20px;
      padding-right: 30px;
      list-style: none;
      margin-bottom: 16px;
      max-height: 50px;
}

动态添加/删除textarea的JS代码

$(".add_field_button").click(function(e){ //on add input button click
        isFirstElementFocused =false;
        x++; //text box increment
        $(".input_fields_wrap").append(
                '<div class="ui-xpathDiv" id="xpathDiv_'+x+'"><textarea id="xpathGrade_'+x+'" type="text" class="ui-xpath" name="mytext[]"></textarea><img class="remove_field" src="images/remove.png"/></div>'
        ); 

    });

    $(".input_fields_wrap").on("click",".remove_field", 
        function(e){ //user click on remove text
            e.preventDefault(); 
            checkDuplicateXpath.remove($(this).prev().val());
            x--;
            $(this).closest("div").remove();
            $(".ui-xpathDiv").each(function () {
                x = Number(this.id.substring(this.id.indexOf("_") + 1));
            });
    });

有人可以指导我如何在FF中纠正这种行为。我实际上被卡住了。

由于

display-inline for image在Firefox中不起作用

0 个答案: