Щели между DIV

[barrudo]

Здрасьти Друзья

Щели между DIV.

Приближаешь-удаляешь в браузере, то видно то невидно.

сайт http://mastaki.pro здесь все в дивах. а на айфоне стабильные щели 
скриншоты с айфона:

 

 

может тема и заеженная, пробовал разное, однако не получается решить)
Подскажите пожалуйста как залотать эти щели, желательно не передвигая сами блоки?

Где-то float left, где-то right;

Edited January 12, 2015 by barrudo

[psywalker]

Один из вариантов делать запас фона у картинок. Начните с 1px и выше.

[barrudo]

  On 1/11/2015 at 9:31 PM, psywalker said:

Один из вариантов делать запас фона у картинок. Начните с 1px и выше.

непонятно)

Расскажите пожалуйста как, с примером)

[Switch74]

вот предположим у вас ширина блока 100px картинку для фона делаем 102px

я подозреваю, что эти щели возникают из-за того, что у вас display:inline-block попробуйте сменить на block

[psywalker]

  On 1/12/2015 at 10:28 AM, barrudo said:

 

  On 1/11/2015 at 9:31 PM, psywalker said:

Один из вариантов делать запас фона у картинок. Начните с 1px и выше.

непонятно)

Расскажите пожалуйста как, с примером)

 

Эм... ну, например, есть у вас картинка 500px/500px. Вот делайте её 501px/501px спецово, чтобы был запас. И тогда при масштабировании этот запас в 1px (в данном случае) поможет избежать проблелов)

 

  Quote

я подозреваю, что эти щели возникают из-за того, что у вас display:inline-block попробуйте сменить на block

Ааа, вот в чём дело, а слона-то я и не приметил. Тогда возможно всё проще и дело в этом.

[Sensei]

У элементов задан float, так что в итоге display все равно в значении block.

Запас в пиксель не факт что поможет, там ведь не картинками, а бордерами сделано.

Такие вещи, наверное, лучше делать на SVG.

[barrudo]

  On 1/12/2015 at 11:38 AM, Sensei said:

У элементов задан float, так что в итоге display все равно в значении block.

Запас в пиксель не факт что поможет, там ведь не картинками, а бордерами сделано.

Такие вещи, наверное, лучше делать на SVG.

Через SVG позже попробую.

Спасибо! Вы правильно приметитили, что сделано бордерами, а не картинками.

Так как их все таки прижать между собой? 

Добрые Люди) Давайте попробуем решить этот вопрос! Ведь он напрямую относится к верстке.

  On 1/12/2015 at 10:32 AM, Switch74 said:

вот предположим у вас ширина блока 100px картинку для фона делаем 102px

я подозреваю, что эти щели возникают из-за того, что у вас display:inline-block попробуйте сменить на block

Правильно, у меня стоит inline-block.

но внутри нет картинок, все сделанео DIVами через border)

Если поменять на block, то все слетает вниз. Или какойеще есть рецепт?

Edited January 12, 2015 by barrudo

[Great Rash]

А если так?

[barrudo]

  On 1/12/2015 at 2:26 PM, Great Rash said:

А если так?

 

Спасибо! Здорово! Ты есть Вы двигаете на 1px блоки, верно?

и еще вопрос изспользования after, before, мне немного непонятен смысл их использхования, расскажите пожалуйста.

[Great Rash]

  On 1/12/2015 at 3:05 PM, barrudo said:

Спасибо! Здорово! Ты есть Вы двигаете на 1px блоки, верно?

Ну да, я предполагаю, что "дырки" появляются из-за того, что при зуме появляются дробные значения у ваших блоков, и Safari их округляет в меньшую сторону, из-за чего и появляются эти "дыры". Поэтому я предлагаю сдвигать все блоки к центру на пиксель, чтобы избежать подобной ситуации (возможно и пикселя окажется мало, но это мелочи - можно экспериментально подогнать). А вообще тут правильно подсказали попробовать SVG, особенно если не интересуют ИЕ ниже 9 версии и у блоков фиксированная ширина.

 

  On 1/12/2015 at 3:05 PM, barrudo said:

и еще вопрос изспользования after, before, мне немного непонятен смысл их использхования, расскажите пожалуйста.

Да просто для того, чтобы в HTML поменьше элементов было, т.к. элементы выполняют чисто декоративную функцию, то лучше "спрятать" их в CSS, чтобы например другому разработчику было проще копаться в коде скажем, если он будет к этому делу движок прикручивать. Работая в команде, приучаешь себя думать о других... 

[barrudo]

  On 1/12/2015 at 4:02 PM, Great Rash said:

 

  On 1/12/2015 at 3:05 PM, barrudo said:

Спасибо! Здорово! Ты есть Вы двигаете на 1px блоки, верно?

Ну да, я предполагаю, что "дырки" появляются из-за того, что при зуме появляются дробные значения у ваших блоков, и Safari их округляет в меньшую сторону, из-за чего и появляются эти "дыры". Поэтому я предлагаю сдвигать все блоки к центру на пиксель, чтобы избежать подобной ситуации (возможно и пикселя окажется мало, но это мелочи - можно экспериментально подогнать). А вообще тут правильно подсказали попробовать SVG, особенно если не интересуют ИЕ ниже 9 версии и у блоков фиксированная ширина.

 

 

 

  On 1/12/2015 at 3:05 PM, barrudo said:

и еще вопрос изспользования after, before, мне немного непонятен смысл их использхования, расскажите пожалуйста.

Да просто для того, чтобы в HTML поменьше элементов было, т.к. элементы выполняют чисто декоративную функцию, то лучше "спрятать" их в CSS, чтобы например другому разработчику было проще копаться в коде скажем, если он будет к этому делу движок прикручивать. Работая в команде, приучаешь себя думать о других... 

 

 

Браво! Спасибо!

тема закрыта.