Дополнительные дополнения в Chrome/Safari/Webkit - любые идеи?

Ответ 1

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

<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 в набор полей, который содержит его.

Ответ 2

В таблице стилей 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:

Enjoy

Ответ 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*/
}

Ответ 4

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

body {padding :0; margin:0}

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

Ответ 5

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

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

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

Ответ 6

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

* { padding: 0 } 

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

Ответ 7

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

и: body, html {padding: 0; margin:0} что это!

Ответ 8

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

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

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

Ответ 9

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