3

私は今、すべてのブラウザGTE IE8で動作するスクリプトを手に入れました

そして、私はIE7で動作する必要があり、誰かがこのスクリプトで何が間違っていたのか教えてもらえますか

Chrome をアップ、IE7 をダウン

この画像では、他のすべてのブラウザーでの動作を確認できます。IE7 の暗い領域はバグのある領域であり、背景が行ではなく div にあるためです。

IE7 アップ、Chrome ダウン

IE7 と Chrome からのコード

最後になりましたが、これを実現するための私のスクリプト:

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 に答える