Question

我正在开展涉及一系列文字的项目。通过javascript添加范围，例如，如果我添加＆＃39; a＆＃39;对于跨度，格式化很好，但如果我添加第二个字符，＆＃39; b＆＃39;，之后写的字符和所有字符向下移动大约几个像素，并保持在该行。跨度必须始终在同一位置显示文本，我使用单色字体，以便统一显示。我想也许跨度是文字包装或其他东西。奇怪的是，我在Wordpress网站上使用了相同的范围和代码而没有任何问题。它只是出现问题的独立html，javascript和CSS。我目前的跨度CSS看起来像这样。我也试过从Wordpress复制CSS配置文件，但是在添加第二个字符后，没有看到明显改变文本位置的任何内容。

#dlpasscode {
display:block;
z-index: 2;
width: 170px;
top: 144px;
left: 120px;
font-family: 'Ubuntu Mono';
font-size: 28px;
color: white;
margin-top:0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
margin: 0;
padding: 0;
border: 0;
font-size: 28px;
vertical-align: baseline;    
white-space:nowrap;    
overflow: hidden;}

我调用javascript来显示字符（这是用于UI模拟器，每个ID作为字符传入，然后添加到字符串中）。

    function dlDisplayPass(lastOptScreen) {
        switch (lastOptScreen) {
            case dlSim.enterNewPass.src:
            case dlSim.confNewPass.src:
                passStore = passStore + clicked.id;
                jQuery('#dlpasscode').append(clicked.id);
                break;
            default:
                // display up to 9 masked characters, stop and need to display arrow
                // allows only up to 32 characters, ignores clicks after that and beeps
                if (passStore.length < 32) {
                    passStore = passStore + clicked.id;
                } else {
                    longbeep.playclip();
                }

                var passArray = null;

                if (passStore.length <= 8) {
                    passArray = new Array(passStore.length).join(dlpassmask);
                }
                if (passStore.length === 9) {
                    passArray = new Array(9).join(dlpassmask);
                }
                if (passStore.length >= 10 && passStore.length < 32) {
                    passArray = leftArrow + new Array(8).join(dlpassmask);
                }
                if (passStore.length < 32) {
                    jQuery('#dlpasscode').text(passArray).append(clicked.id);
                }


        }
        return false;
    }

实际跨度看起来像这样

<span class="dlbezel dlchild" id="dlpasscode" unselectable ></span>

Answer 1

我发现更新jQuery更新了这个问题。根据他们的网站，the jQuery().text() function说“由于不同浏览器中HTML解析器的不同，返回的文本可能会因换行符和其他空格而异。”

感谢您的帮助。

当我添加其他文本时，为什么我的跨度会下降？

1 个答案: