3

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

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

Chrome 向上，IE7 向下

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

IE7 向上，Chrome 向下

来自 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'));">
4

1 回答 1

1

从这个问题中并不清楚你到底想要达到什么目的。通过阅读代码，您似乎将每个单词包装在一个跨度中，然后使用该跨度的位置来确定它是否在新行上，这会导致同一行上的每个单词在一个新的跨度，每个都有 class="line"。

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

如果您所做的只是在您应该line-height:在样式/css 中使用的单词行之间进行填充。

更新

我建议——假设你不能直接访问标记，这很有可能——你只坚持你的第一部分代码。这将是用跨度包装每个单词的部分。在这些跨度上，我会应用应用你想要的背景颜色的类，应该不需要将它们组合成它们的组成线。这将消除计算的需要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 中拉伸背景色以填充空间方面仍有问题，我会查看您的 span 元素的 CSS 定义，并确保它们不是overflow:hidden,zoom:1或display:block.

于 2013-04-10T11:35:41.413 回答