Question

我现在有一个脚本适用于所有浏览器GTE IE8

我需要它在IE7中工作，也有人可以告诉我在这个脚本中我做错了什么

Chrome up, IE7 down

在这张图片中你会看到它在所有其他浏览器中是如何工作的，你看到IE7中的暗区是错误的区域，因为背景是在div而不是在线上

IE7 up, Chrome down

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

Body tag htmlscript

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

Answer 1

从问题中确切地说，你想要实现的目标并不是很清楚。通过阅读代码，您似乎将每个单词包装在一个范围内，然后使用该span的位置来确定它是否在新行上，这会导致同一行中的每个单词在一个内部合并在一起新的跨度，每个都有class =“line”。

虽然读取新形成的跨度的偏移位置 - 在同一代码块中形成 - 可能导致您的IE7问题，因为它的位置信息可能还没有重新计算...它确实提出了为什么这样的问题你这样做？特别是如果考虑到函数padSubsequentLines的名称。

如果你所做的只是在单词行之间填充，你应该在你的style / 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定义你的span元素并确保它们不是{{1} }，overflow:hidden或zoom:1。

将每一行包装成span标签（IE7）

1 个答案:

更新