Неправильно выровненные изображения на макете жидкости / процент - PullRequest
Новая
       53

Неправильно выровненные изображения на макете жидкости / процент

1 голос
/ 22 февраля 2012

У меня есть этот код: http://jsfiddle.net/VV9qJ/, но по какой-то причине я не могу исправить небольшие пиксельные ошибки, вызванные изображениями.В основном вы заметите, что некоторые изображения имеют пиксель или два белых пробела вокруг некоторых, а некоторые нет, особенно когда вы изменяете размер окна браузера.Каждый браузер также по-разному отображает белые пробелы.

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

Есть ли дурак?надежный метод обеспечения того, чтобы изображения всегда были плотно прилегают друг к другу в разных браузерах?JQuery возможно?Я сделал множество поисков в Google, но ничего не нашел по этому поводу.

Все еще не нашел решения для этого.Мне трудно поверить, что решения там нет, кто-нибудь может помочь вообще?

Ответы [ 3 ]

0 голосов
/ 22 февраля 2012

Добавьте следующий код под вашей группой ссылок div

межбуквенный интервал: -4px;

http://jsfiddle.net/VV9qJ/11/

0 голосов
/ 22 февраля 2012

Ваша проблема - width:100% в div с классом content ..

, в то время как div, несущий класс banner, также установлен на 100% width занимает все пространство 100%, но когда вы подразделяете 100% на 50% + 50%, происходит разделение 100% скажем, ширина - 500 на 250 + 250 для ваших подразделений. Но деление происходит правильно только тогда, когда ширина, взятая его родителем (поскольку его динамика), равна EVEN NUMBER .. т.е. 2 (n) ..

в противном случае, 50% -ое разделение не происходит должным образом, скажем, 501 было доступным пространством, что означает, что div с шириной 100% займут все пространство, которое составляет 501 - но дочерние div с шириной 50% получат 250px и 250px оставляя позади тот разрыв в 1px, который вы заметили !! ..

Чтобы удалить пробел, дайте background-color, чтобы вы могли пропустить 1px пробел, который ползет !!

Это не лучший метод для преодоления этого - должен быть способ css, о котором я не могу сейчас думать ... так что вот решение JS .. 

function load(){
var largelink = document.getElementById("largelink");
largelink.nextSibling.style.width = largelink.parentNode.offsetWidth-largelink.offsetWidth + "px";
}
window.onload = load;
window.resize = load;​

Т.е., Parent - если 501 и 1-й ребенок с 50% будет 250, следовательно, второй ребенок будет 501-250 + "px"

Отредактировано только 1 набор вашего HTML (вы должны сделать то же самое для остальных) - изменен, чтобы получить идентификатор родителя (15 его 501) и LargeLin (если его 501 - это будет 250) 

<div id="largeLink" class="largeLink">

Havnt проверил это .. надеюсь, что это работает ..

0 голосов
/ 22 февраля 2012

Если я не понимаю, в чём дело, я не могу воспроизвести проблему с белыми пробелами, но похоже, что это может быть проблема с полями или отступами. 

div.smallLink {
    display: inline-block;
    font-size: 100%;
    margin: 0;
    padding: 0;
    width: 50%;
}

Возможно, вытакже необходимо установить поля и отступы для тегов img в .smallLink на 0.

...