将每行换行为跨度标记(IE7)
我现在有一个脚本，适用于所有浏览器GTE IE8
我也需要它在IE7中工作，有人能告诉我我在这个脚本中做错了什么吗
在这张图片中，您可以看到它在所有其他浏览器中是如何工作的，并且您可以看到IE7中的黑色区域是错误区域，因为背景是在div上而不是在行上
来自IE7和Chrome的Kode
最后但并非最不重要的是，我的脚本实现了这一点：
function padSubsequentLines(element) {
var words = element.innerHTML.split(' ');
element.innerHTML = '';
for (var i = 0; i < words.length; i++) {
element.innerHTML += '<span>' + words[i] + '</span> ';
}
var spans = element.childNodes;
var currentOffset = spans[0].offsetTop;
var html = '<span class="line">';
for (var i = 0; i < spans.length; i++) {
if (spans[i].nodeType === 3)
continue;
if (spans[i].offsetTop > currentOffset) {
html += '</span><span class="line">';
currentOffset = spans[i].offsetTop;
}
html += spans[i].innerHTML + ' ';
}
html += '</span>';
element.innerHTML = html;
}正文标记htmlscript
<body onload="padSubsequentLines(document.getElementById('question_heading'));">回答 1
Stack Overflow用户
发布于 2013-04-10 19:35:41
从这个问题中，我们并不清楚你到底想要实现什么。通过通读代码，似乎您正在将每个单词包装在一个跨度中，然后使用该跨度的位置来确定它是否在新行上，这将导致同一行上的每个单词被合并到一个新的跨度中，每个单词都有行“class=”。
当读取新形成的跨度的偏移位置时-在相同的代码块中形成-可能会导致您的IE7问题，因为它的位置信息可能还没有被重新计算...它确实提出了一个问题，那就是你为什么要这样做？特别是当你考虑到你的函数名padSubsequentLines的时候。
如果你所做的只是在字行之间填充，你应该在你的样式/css中使用line-height:。
更新
我建议-假设您不能直接访问标记，这将是非常可能的-您只需使用代码的第一部分。这将是用跨度包装每个单词的部分。在这些跨度上，我会应用应用你想要的背景颜色的类，应该没有必要将它们组合到它们的构成线中。这将消除计算offsetTop的需要，甚至应该适用于IE7。如前所述，如果您需要在行之间填充，请使用line-height。
function padSubsequentLines(element) {
var
words = element.innerHTML.split(' '),
count = words.length,
html = '',
i
;
for (i=0; i<count; i++) {
html += '<span class="background">' + words[i] + ' </span>';
}
element.innerHTML = html;
}注意：__：你需要确保单词之间的空格保持在跨度内，这样背景颜色看起来就没那么明显了。
完成上述工作后，如果你仍然有关于背景颜色拉伸以填充IE7空间的问题，我会查看你的跨度元素的CSS定义，并确保它们不是overflow:hidden、zoom:1或display:block。
https://stackoverflow.com/questions/15924407
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号