Mystery 1px border в WebKit

Question

У меня есть загадочная нижняя граница 1px, появляющаяся в Safari и Chrome (я думаю, вещь WebKit).Firefox отображает это нормально.

Кнопка ниже должна находиться на одном уровне с полосой tealy внизу.Не должно быть этой 1px линии, разделяющей их.

Я играл с height, border, position, padding и marginно я не смог понять это.

Изменение bottom: 0 на bottom: -5px в Web Inspector все еще приводит к появлению строки.

В нее входит довольно много стилейтак что я постараюсь объединить каскад.

#tell-a-friend {
  background-repeat:no-repeat;
  display:block;
  height:33px;
  margin-right:0;
  position:absolute;
  float:right;
  font-size:1.2em;
  margin-right:0.8em; 
  background-position:right 0;
  bottom:0;
  height:35px !important;
  left:682px;
  width:82px;
}

Опять же, мне может быть лучше ссылки на сайт .

CSS минимизирован,так что используйте Web Inspector для просмотра CSS.

Я перепробовал все, что только могу, прямо сейчас, поэтому я собираюсь посмотреть, сможете ли вы, ребята, помочь мне:)

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

Answer 1

Редактировать: это абсолютная высота вашего <div id="header">. Попробуйте сделать его на один пиксель короче.

Это не черный контур, это серый фон ... фоновое изображение имеет прозрачную строку размером 1 пиксель внизу, а серый фон просвечивает.