將每一行包裝成span標簽（IE7）

Question

我現在有一個腳本適用於所有瀏覽器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'));">

Answer 1

從問題中確切地知道你想要達到的目標並不是很清楚。 通過閱讀代碼，您似乎將每個單詞包裝在一個范圍內，然后使用該span的位置來確定它是否在新行上，這會導致同一行中的每個單詞在一個內部合並在一起新的span，每個都有class =“line”。

雖然讀取新形成的跨度的偏移位置 - 在同一代碼塊中形成 - 可能會導致您的IE7問題，因為它的位置信息可能還沒有重新計算...它確實提出了一個問題，為什么你在做什么這個？ 特別是如果你考慮功能padSubsequentLines的名稱。

如果你所做的只是在單詞行之間填充，你應該在你的style / css中使用line-height: .

更新

我建議 - 假設你沒有直接訪問標記，這很可能 - 你只需堅持你的第一部分代碼。 這將是用跨度包裹每個單詞的部分。 在這些跨度上，我將應用應用所需背景顏色的類，不需要將它們組合到它們的組成行中。 這將消除計算offsetTop的需要，甚至應該適用於IE7。 正如我之前所說，如果你需要line-height之間填充，請使用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元素並確保它們沒有overflow:hidden ， zoom:1或display:block 。

將每一行包裝成span標簽（IE7）

問題描述

1 個解決方案

解決方案1
1 已采納 2013-04-10 11:35:41

更新

將每一行包裝成span標簽（IE7）

問題描述

1 個解決方案

解決方案1 1 已采納 2013-04-10 11:35:41

更新

解決方案1
1 已采納 2013-04-10 11:35:41