CSS Выравнивание изображений. Всегда разница в 1 пиксель. Почему как?

Question

Привет, ребята.Я внедрил кнопку «Мне нравится» в Facebook на моем сайте.

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

Теперь я относительно новичок в CSS, иЯ не знаю, что такое лучшие практики.

Используя Firebug, я отследил и выяснил, что FBML (однако он работает) создает промежуток, в котором содержится кнопка «Мне нравится».Я предположил, что это как-то связано с проблемой.

Мое разрешение было следующим:

<div style="display: inline; position: relative; top: 1px;">
    <img src="images/button.png">
</div>

<fb:like layout="button_count" show_faces="false"></fb:like> 

Я был бы очень признателен (насколько мне известно), если бы кто-то мог объяснить, почему кнопка FB likeпоказывал это поведение, и если, как я исправил, это лучшее разрешение?

Кроме того, в целом ... Я в конечном итоге получил мою страницу отображается именно так, как я хочу.Для этого я использовал 25 <div> с.Это казалось много - хотя моя страница несколько сложна.Это нормально?

Большое спасибо!

РЕДАКТИРОВАТЬ Я использую div для позиционирования элементов.Например, я хочу, чтобы часть контента отображалась слева, а часть - справа, поэтому у меня есть два делителя шириной 50% рядом.

Затем я хочу, чтобы кнопка отображалась по центру, поэтому у меня естьdiv с выравниванием текста: центр;Я сделал это, так как мне сообщили, что это предпочтительнее, чем

. После этого я снова хочу, чтобы все было слева и справа, поэтому у меня снова будет тот же класс, что и для первой точки, дважды. Это дополняется, я хочу границувокруг содержания.Как таковой у меня есть еще один div внутри, который имеет рамку: 1px сплошной черный;

Это правильное / приемлемое использование?Thx

Answer 1

Томас, в Firefox попробуйте выделить кнопку «Мне нравится», щелкнуть правой кнопкой мыши и выбрать просмотр выбранного источника.Я просмотрел три сайта, чтобы проверить их согласованность, и все три показывают, что текст «Мне нравится» заключен в таблицу, div, span и anchor;все может изменить интервал в зависимости от того, как выполняется стилизация.

Если у вас установлен Firebug в FF, вы можете поиграться с CSS и посмотреть, что нужно, чтобы немного поправить выравнивание.Имейте в виду границы, отступы, поля, высоту строки, пробел / отступы и т. Д.

Answer 2

Не уверен, что это все еще проблема для вас, но у меня недавно была эта проблема с изображением, по какой-то причине я получил дополнительные 2px свободного места внизу изображения, независимо от того, сколько других стилей я вырезалмоя страница, но я смог исправить это очень легко:

   .divname img { display:block; }

Это может или не может работать для вас.

Answer 3

Вы проверили, что на изображении нет пробелов, чтобы запутать проблему с пробелами?

Answer 4

Попробуйте обернуть код кнопки в <div class="whatever"> и использовать следующий CSS:

div.whatever {
   diaplay: inline;
   margin-top: -1;
}

Отрицательные поля обычно работают для элементов смещения.

Answer 5

Я бы пошел с ответом Крейга за таблицу стилей CSS для сброса, или если вы создаете полноценный веб-сайт, может быть, вы можете попробовать что-то вроде фреймворка CSS, например, 960.gs или Blueprint, который уже включает сброс CSSповедение.

Это хорошие решения с относительно низкой занимаемой площадью и гарантией того, что презентация вашего сайта совместима с браузером на 99,99%.

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

Извините за английский, если какая-либо ошибка появляется.

Answer 6

Попробуйте использовать сброс CSS.

Звучит так, будто это может быть проблема с полем, заполнением или границей.

Попытка:

* { margin:0; padding:0; border:0; outline:0; }

Answer 7

звучит как 2 вещи, которые могут происходить,

первое - это самое очевидное, что связано с относительным позиционированием в проверке css здесь для более.

секундачто это может быть рендеринг границы по умолчанию, поэтому добавьте это в ваши стили и посмотрите, что произойдет:

*
{
   border:none;
}