IE 8 удаляет разрыв строки между узлами с помощью JavaScript - PullRequest
Новая
       17

IE 8 удаляет разрыв строки между узлами с помощью JavaScript

0 голосов
/ 02 января 2011

Хорошо, у меня есть список узлов HTML, которые должны быть встроены без промежутков между ними.Проблема заключается в том, что узлы написаны из CMS и, следовательно, будут содержать всевозможные разрывы строк и пробелы.Поэтому я удаляю пробелы с помощью JS, используя метод, описанный в этот вопрос .Проблема, однако, в том, что в IE (не в 9) пробелы не являются частью списка дочерних элементов родительского узла, что делает метод бесполезным в IE.Однако IE 7 (или, по крайней мере, IE 9, эмулирующий IE 7) игнорирует разрывы строк, так что один в открытом виде.Это оставляет IE 8 в качестве нарушителя спокойствия.Я обнаружил, что разрыв строки на самом деле является частью outerHTML и что простой сброс outerHTML добился цели - вот так: 

node.outerHTML = node.outerHTML

Однако это приведет к перезагрузке узла изначально и, следовательно,удаление всех событий и других настроек на узле, что не очень хорошо.

Итак, мой вопрос сейчас: есть ли способ удалить этот разрыв строки из узлов externalHTML без сброса узла?Я пробовал с зумом: 1, но безрезультатно.Надеюсь, у кого-то есть опыт работы с этим.

HTML более или менее похож на это: 

<div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

, но это не обязательно должно быть <div>, он должен быть в состоянии справиться с любымтег.CSS довольно прост и выглядит примерно так: стиль 

.items { white-space: nowrap; }
.items .item { display: inline-block; background: red; height: 150px; width: 180px; }

и IE (6-7 (8)) такой: 

.items .item { *display: inline; *zoom: 1; }

я знаю, что это возможно«удалить» это пространство с помощью CSS следующим образом: 

.items { word-spacing: -0.33em; letter-spacing: -0.33em; }
.items .item { word-spacing: normal; letter-spacing: normal; }

, но я считаю, что это уродливый хак, который иногда что-то портит.Так как я уже манипулирую элементами с помощью JS, я просто надеялся удалить пробелы с помощью JS.

Небольшой предварительный просмотр того, что я имею в виду:

Интервалы не должны появлятьсямежду квадратами http://tokimon.dk/stackoverflow/display-inline-spacing.png

Ответы [ 2 ]

0 голосов
/ 03 января 2011

Благодаря быстрому тесту, то, что вы хотите, может быть достигнуто с помощью чистого CSS - просто поместите все «элементы» с плавающей точкой: 

.items .item { float: left; background: red; }

Обновлен тестовый набор: http://jsfiddle.net/yahavbr/jBH5D/4/

0 голосов
/ 02 января 2011

Похоже, проблема модели коробки IE.У вас есть этот метатег в вашей голове? 

<meta http-equiv="X-UA-Compatible" content="IE=8" />
...