#ИМЯ?

Это не ударило меня до сих пор (и это не только в браузерах webkit). На всех текстах в тегах p, тегах h1 и т.д.... есть дополнительное пространство над текстом и под ним.

В chrome я нашел это:

таблица стилей пользователя пользователя

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;

Это делает неправильное выравнивание в некоторых местах. И да, я использую таблицу стилей reset, и никакие дополнения или поля не добавляются. В значительной степени базовая установка. Почему это и как его решить?

Ответы

Ответ 1

Вы также можете напрямую изменить эти атрибуты так:

-webkit-margin-before:0em;
-webkit-margin-after:0em;

Работает для меня в Chrome/Safari. Надеюсь, что это поможет!

Ответ 2

Эти -webkit-margin (s) перезаписываются margin: 0; padding: 0;. Не беспокойтесь о них.

Дополнительное пространство? Возможно, вы установили line-height:?

Ответ 3

У меня была такая же проблема. Правильное отображение в Firefox, но не в Chrome.

Я более подробно рассмотрел http://meyerweb.com/eric/tools/css/reset/ и обнаружил, что я не объявил общую строку-высоту для тега body в моей таблицы стилей. Установите его в 1.2 и воссоздайте правильный макет в обоих браузерах.

Ответ 4

У меня была такая же проблема. Дополнительное пространство между ссылками меню. Ни одно из вышеперечисленных решений не работало. То, что сработало для меня, было отрицательным. Просто сделайте что-нибудь вроде этого:

margin: 0 -2px;

НОВЫЙ РЕДАКТИРОВАНИЕ:

Это не имеет никакого отношения к -webkit-полям. Скорее всего, ваша проблема возникает с встроенными элементами. Это происходит потому, что у вас есть пробелы или разрывы строк между вашими встроенными элементами. Чтобы исправить это, у вас есть много вариантов:

  • удалить все пробелы и разрывы строк между встроенными элементами
  • тег закрытия закрывающего элемента - например </li> (HTML5 не заботится)
  • отрицательный запас (как указано выше - проблемы с IE6/7 - кто заботится, обновляется;)
  • установить font-size: 0; в проблемный контейнер встроенного элемента (имеет проблемы с android и если размер шрифта с ems)
  • отказаться от встроенного и использовать float (таким образом вы потеряете text-align: center)

Объяснено более конкретно и примеры от CHRIS COYIER

Ответ 5

Просто удалите пробел между тегами, например.

<p id="one"></p>
<p id="two"></p>

становится:

<p id="one"></p><p id="two"></p>

Ответ 6

У меня была такая же проблема с тегом <h3>. Я попытался установить margin:0;, но это не сработало.

Я обнаружил, что я обычно комментировал строки в моем CSS, используя //. Я никогда не замечал этого, потому что раньше он не вызывал никаких проблем. Но когда я использовал // в строке перед объявлением <h3>, это заставило браузер полностью пропустить объявление. Когда я торгую // для /**/, я смог настроить маржу.

Мораль этой истории: всегда используйте правильный синтаксис комментариев!

Ответ 7

Для меня картина была:

* {margin:0;padding:0;}

В Firefox (FF) и Google Chrome оба значения равны 0.67em. FF показал свою разницу по умолчанию, но перечеркнуто, но применил его в любом случае. GC показал свою разницу по умолчанию (-webkit-margin-before...) uncrossed.

Я применил

* {margin:0;padding:0; -webkit-margin-before: 0; -webkit-margin-after: 0;}

но безрезультатно, хотя GC теперь показал пересечение по умолчанию.

Я узнал, что могу применить либо

line-height: 0;

или

font-size: 0;

для достижения желаемого эффекта. Это имеет смысл, если предположить, что маржа имеет тип .67em. Если кто-нибудь может дать объяснение, почему браузеры делают нашу жизнь несчастной, применяя зависящий от линии, несъемный край, я был бы очень благодарен.

Ответ 8

Для меня в Chrome это вызывало примерно 40px padding-start. Я сделал следующее, что сработало:

ul {
    -webkit-padding-start: 0em;
}

Ответ 9

    -webkit-margin-before: 0em;
    -webkit-padding-start: 0;
    -webkit-margin-after: 0em;

Это решило это для меня, когда у меня была эта точная проблема.

Ответ 10

У меня была та же проблема. Внезапно одна из моих трех ячеек таблицы, содержащая данные, заголовок ее была немного уменьшена. Моя проблема была просто решена, добавив следующее:

table td
{
    vertical-align: top;
}

Похоже, что какой-то другой элемент в "высшей" таблице стилей рассказывал мои данные, чтобы центрировать себя в ячейке, а не просто оставаться на вершине.

Я думаю, что это просто глупо, и на самом деле это не проблема... но следующий человек, который прочитает эту тему, может иметь ту же самую тупую ошибку, что и я:)

Будьте осторожны!

Ответ 11

Если user agent stylesheet запускается, это связано с тем, что свойство тега не было правильно определено в вашей таблице стилей CSS.

Скорее всего, опечатка, забытая скобка или точка с запятой разбивает вашу таблицу стилей ПЕРЕД ДОПОЛНИТЕЛЬНЫМ ТРЕБОВАНИЕМ, который ваша страница позже ссылается или "нуждается".

Запустите проверку ошибок CSS через проверку, например CSS LINT и исправьте, какие ошибки в конечном итоге обнаружены.