Jump to content
  • 0

Щели между DIV


barrudo
 Share

Question

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

Щели между DIV.

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

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

 

2.jpeg

3.jpeg

 

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

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

Edited by barrudo
Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

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

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

Link to comment
Share on other sites

  • 0

 

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

непонятно)

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

 

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

 

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

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

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

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

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

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

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

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

Edited by barrudo
Link to comment
Share on other sites

  • 0

А если так?

 

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

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

Link to comment
Share on other sites

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

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

 

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

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

Link to comment
Share on other sites

  • 0

 

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

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

 

 

 

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

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

 

 

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy