Дополнительный отступ на Chrome / Safari / Webkit - есть идеи?

Question

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

Есть идеи?

Answer 1

Таблица стилей WebKit содержит следующие свойства: margin и padding:

-webkit-margin-before:
-webkit-margin-end:
-webkit-margin-after:
-webkit-margin-start:

-webkit-padding-before:
-webkit-padding-end:
-webkit-padding-after:
-webkit-padding-start:

Наслаждайтесь

Answer 2

Ваша страница имеет элемент в верхней части с верхним полем, который выходит за пределы вашей оболочки страницы. Если у вас есть это:

<div class="wrapper" style="margin: 0">
  <div class="section" style="margin: 40px 0"> Stuff! </div>
</div>

Тогда элемент .section будет расположен вверху .wrapper, а его поле в 40px будет расширяться за верх Это связано с тем, что поля сжимаются вместе, так что два поля между элементами не накапливаются. Вы можете предотвратить это, добавив overflow: hidden в оболочку.

В вашей разметке это элемент .mini-search с верхним полем в 40px. Либо удалите это поле, либо добавьте overflow: hidden к набору полей, в котором он содержится.

Answer 3

Используйте этот код CSS:

/*Reset Safari User Agent Styles*/
* {-webkit-padding-start: 0px;}

Проблема, которую вы комментируете, заключается в том, что стиль пользовательского агента, о котором я узнал, проверяет тег body с помощью инструмента браузера. Вы должны отслеживать стили элементов в навигаторе, используя инструменты, которые он предоставляет (теперь все импортеры включают инспектор DOM), чтобы вы могли демистифицировать нестандартное поведение.

Я знаю, что вы не просите об этом, но, говоря о материалах WebKit, я вставляю код для получения скругленные границы в любом браузере, кроме IE.

.rounded
{
-moz-border-radius:5px; /*works on Firefox */
-webkit-border-radius:5px; /*works on Safari and Google Chrome*/
border-bottom-radius: 5px; /*works on Opera*/
}

Answer 4

Я надеюсь, что вы сделали:

body {padding :0; margin:0}

по умолчанию тег body имеет отступ.

Answer 5

Это , на мой взгляд, вызвано элементом EMBED, добавленным некоторым плагином сразу после открывающего HTML-тега * (отметьте «щелкните правой кнопкой мыши> проверить элемент», чтобы увидеть это действительно там). Если да, то есть два основных варианта:

1. отключить / удалить плагин , который отвечает за добавление элемента ; (предпочтительно, поскольку это глобально)
2. вставьте embed{display:none} в таблицу стилей.

---

* Это был мой случай - плагин под названием плагин по умолчанию , и отключение и удаление помогли решить проблему.

Answer 6

У меня была та же проблема с моей навигацией, которая имеет отступ и содержит кнопки. Overflow:hidden сработало, но также отключило кнопки, потому что они имели отступ, который пересекал границу высоты navs Итак, я попробовал overflow:visible, и это отлично сработало для меня.

Answer 7

Это работает с IE (по крайней мере, IE v10 в моих тестах):

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Нижний - тот, который работает для IE 10, просто сохраняет все размеры в соответствии с тем, как вы установили селектор / элемент в ширине и / или высоте.

Answer 8

Всегда включайте файл CSS YUI reset.

и: body, html {padding: 0; margin:0} вот и все!

Answer 9

Я могу это исправить, удалив правило:

* { padding: 0 } 

из вашего CSS.Я не уверен, что это ломает, но это причина.