Javascript 将每行包装成跨度标记（IE7）_Javascript_Html_Css

Javascript 将每行包装成跨度标记（IE7）

javascript html css

Javascript 将每行包装成跨度标记（IE7）,javascript,html,css,Javascript,Html,Css,我现在有一个脚本，适用于所有浏览器GTE IE8 我也需要它在IE7中工作，有人能告诉我我在这个脚本中做错了什么吗在这张图片中，您可以看到它在所有其他浏览器中的工作方式，您可以看到IE7中的黑色区域是有缺陷的区域，因为背景在div上，而不是行上来自IE7和Chrome的Kode 最后但并非最不重要的是，我的脚本实现了这一点： function padSubsequentLines(element) { var words = element.innerHTML.s

我现在有一个脚本，适用于所有浏览器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;
    }

功能焊盘子序列线（元素）{
var words=element.innerHTML.split（“”）；
element.innerHTML=''；
for（var i=0；icurrentOffset）{
html+=''；
currentOffset=spans[i]。offsetTop；
}
html+=span[i].innerHTML+''；
}
html+=''；
element.innerHTML=html；
}

正文标记htmlscript

<body onload="padSubsequentLines(document.getElementById('question_heading'));">

从这个问题上看，你究竟想达到什么目的并不十分清楚。通过阅读代码，您似乎正在将每个单词包装在一个span中，然后使用该span的位置确定它是否在新行上，这将导致同一行上的每个单词在一个新span中合并在一起，每个带有class=“line”

在读取新形成的跨距（形成于同一代码块中）的偏移位置时，可能会导致IE7问题，因为其位置信息可能尚未重新计算。。。它确实提出了一个问题：你为什么要这样做？特别是如果您将函数名

padsequentlines

考虑在内

如果您所做的只是在单词行之间填充，那么您应该在样式/css中使用

行高：

更新我建议——假设您没有直接访问标记的权限，这很有可能——您只需坚持代码的第一部分。这将是用一个空格将每个单词括起来的部分。在这些跨度上，我将应用应用您想要的背景颜色的类，不需要将它们组合到它们的组成线中。这将消除计算偏移量的需要，甚至适用于IE7。如前所述，如果需要在行之间填充，请使用

行高

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

功能焊盘子序列线（元素）{
变量
words=element.innerHTML.split（“”），
count=words.length，
html=“”，
我
;
对于（i=0；iI需要让背景位于单词后面，而不是div上的，因此我需要将每一行放入一个span标记中，这样我就有两个单独的span，否则它将在孔上做背景area@SimonPertersen我猜你没有访问html的权限？标记是由某种js插件或类似插件生成的…@SimonPertersen I've根据你的评论更新了我的建议。它解决了IE中的问题，只是一个注释（这在Ipad中造成了非常小的空间）但是你解决了我需要解决的问题，我知道这是一个老问题——问了又答了，但自从我从谷歌来到这里搜索解决方案时，我决定对它进行评论。我需要做你需要做的事情，mate，需要不时用html开始和结束标记将单词包装成单独的行，所以我创建了一个工具-就是这样（希望这对任何人都有帮助：））