css - отступ под фоновой ссылкой рядом с текстовой ссылкой - почему? - PullRequest
Новая
       7

css - отступ под фоновой ссылкой рядом с текстовой ссылкой - почему?

0 голосов
/ 12 июля 2010

Эта проблема CSS убивает меня: - (

Я не могу удалить отступы по ссылке на этой странице http://www.yart.com.au/stackoverflow/test2.htm

Я уменьшил проблему до минимума, поэтому она действительно ясна.

Вы можете увидеть мою проблему здесь http://www.yart.com.au/stackoverflow/blue.png альтернативный текст http://www.yart.com.au/stackoverflow/blue.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

<style type="text/css">

*
{
  padding:0;
  margin:0;
  font:15px arial;
}

div
{
  display:inline;
  height:18px;
  line-height:18px;
  background-color :blue;
}

.PageMove
{
  display:inline-block;
  background-image: url(http://www.yart.com.au/stackoverflow/page_move.gif);
  background-repeat:no-repeat;
  width:18px;
  height:18px;
  line-height:18px;
}


.Text
{
 background-color :red;
 display:inline;
 height:18px;
 line-height:18px;
}


</style>
</head>


<body>

<div><a href="#" class="PageMove"></a><a href="#" class="Text">18 pixels high</a></div>

</body>

</html>

Ответы [ 4 ]

2 голосов
/ 12 июля 2010

Вещи, которые display: inline-block обрабатываются как символы и находятся на базовой линии. Под спусками есть место (которое вы найдете на таких буквах, как p, j, g и q).

Установите vertical-align: bottom для размещения элемента снизу вместо базовой линии.

0 голосов
/ 14 января 2011

Я столкнулся с этой проблемой на некоторых шаблонах электронной почты.IE и FF не отображали голубую линию, но электронные письма, открытые на мобильных устройствах, таких как iphone и android, отображали.

Письма, открытые в веб-почтовых клиентах через браузеры Chrome, также отображали голубую линию.

Iрешил проблему, поместив изображение в середину ячейки.выровняйте = "середина"

Установите также ячейку, чтобы выровнять = "середина".

(это помещает синюю линию позади изображения и решает проблему)

На изображениях неправильной формы (png или gif) вы можете рассмотреть вопрос о сохранении изображения с цветом фона.или преобразование в JPEG на белом фоне.Опять же, это не тот тип изображения, который решает эту проблему, просто удаляя чистый фон и создавая сплошной прямоугольник из квадратного блока цвета, чтобы скрыть линию, это решает проблему.

Удачи!

NateБоэ

0 голосов
/ 12 июля 2010

Я не знаю, откуда именно возникла ваша проблема, но для

встроенных элементов нельзя указать «высоту».Таким образом, ваши height:18px; для «встроенного» * ​​1004 * будут игнорироваться.

0 голосов
/ 12 июля 2010

почему бы не использовать float? 

<div style="width: give-it-a-usefull-width">
    <a href="..." id="pageMove" style="float: left;">...</a>
    <a href="..." id="text" style="flaot: left;">...</a>
</div>
...