Угловые комментарии нарушают мой макет - как с ними обращаться?

#html #angularjs #firefox

#HTML #angularjs #firefox

Вопрос:

В Firefox угловые комментарии (которые автоматически добавляются на веб-страницу) нарушают мой макет. Вы можете сказать, что это ошибка Firefox (потому что комментарий ничего не должен изменять — в конце концов, это комментарий), но, тем не менее, проблема существует.

Вот страница, созданная Angular — сокращена до минимума, просто чтобы показать проблему:

 <table style="margin:auto">
  <tbody><tr><td>
    <ol>
    <li>
      <span style="padding-left:1em">
        <h3 style="display:inline">
          first
        </h3>
      </span>
    </li><li>
      <span style="padding-left:1em">
        <h3 style="display:inline">
          second
        </h3>
        <!-- ngRepeat: ... -->
      </span>
    </li><li>
      <span style="padding-left:1em">
        <h3 style="display:inline">
          third
        </h3>
      </span>
    </li>
  </ol>
</td></tr>
</tbody></table>

Все li элементы создаются с помощью Angular repeater, и для каждого добавляется комментарий. Средний комментарий, однако, нарушает макет — создается дополнительное вертикальное пространство.

Как решить эту проблему? Есть ли способ отключить угловые комментарии?

1. Каково ожидаемое поведение здесь? Должны li ли s быть встроенными?

2. @nikjohn, ожидаемый макет — все строки расположены равномерно (по вертикали). Фактический результат — комментарий обрабатывается как половина строки, поэтому в середине у меня больше вертикального пространства.

3. Если это действительно происходит, то это проблема с Firefox. Один из способов обойти это — использовать нормализующую библиотеку CSS, такую как Normalize. Отредактировал мой ответ

4. Кроме того, возникает ошибка в Mozilla!

5. @nikjohn, конечно, это был мой второй шаг после того, как я задал этот вопрос 🙂 — bugzilla.mozilla.org/show_bug.cgi?id=1306559 .

Ответ №1:

Есть способы отключить комментарии Angular, но это, скорее всего, приведет к поломке вашего приложения Angular, поскольку Angular использует эти комментарии для отслеживания элементов DOM, привязанных к директивам.

Если вы хотите стабильную производительность вашего веб-приложения в разных браузерах, вы можете использовать нормализующую библиотеку, такую как Normalize.css и autoprefixer