span | display:inline-block и динамическое изменение высоты спана

[vahrusha]

Здравствуйте, уважаемые.

Никак не могу понять, почему во всех браузерах, кроме IE в приведенном ниже случае при клике на спане (событие onmousedown), его общая (итоговая) высота увеличивается на один пиксель (идущая ниже верстка смещается на 1 пиксель вниз).

Доктайп xhtml 1.0 strict.

<span class="but1"
style="width:20px;margin:10px 0 15px;display:inline-block"
onmouseover="this.className='but2';"
onmousedown="this.className='but3';"
onmouseup="this.className='but2';"
onmouseout="this.className='but1';">
  Бла бла бла
</span>

.but1{
height:19px;
border:1px solid #000;
padding-top:1px;
background-image:url('../_ima/but1.gif');
text-align:center;
cursor:pointer
}
.but2{
height:19px;
border:1px solid #000;
padding-top:1px;
background-image:url('../_ima/but2.gif');
text-align:center;
cursor:pointer
}
.but3{
height:18px;
border:1px solid #000;
padding-top:2px;
background-image:url('../_ima/but3.gif');
text-align:center;
cursor:pointer
}

Вот что получается:

Если спаны заменить на дивы и убрать display:inline-block, то проблема отпадает. Но в данном случае, нужно, чтобы элементы шли рядами.

Спасибо.

Edited July 22, 2010 by vahrusha

[psywalker]

а почему бы не попробовать float: left; ?

[vahrusha]

Спасибо за ответ, сделал divом + float:left.

Но почему в первом случае так получается, непонятно.

Edited July 22, 2010 by vahrusha

[s0rr0w]

.but3{

height:18px;

.but2{

height:19px;

Чтобы такого не происходило, нужно указывать vertical-align: top

[vahrusha]

.but3{

height:18px;

.but2{

height:19px;

Чтобы такого не происходило, нужно указывать vertical-align: top

Так ведь еще и паддинги меняются... и в сумме то получается одно и тоже...

.but3{

height:18px;padding-top:2px

.but2{

height:19px;padding-top:1px

Спасибо.

[Great Rash]

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

P.S. Как уже сказал s0rr0w задание vertical-align: top; должно помочь.

[s0rr0w]

Так ведь еще и паддинги меняются... и в сумме то получается одно и тоже...

.but3{

height:18px;padding-top:2px

.but2{

height:19px;padding-top:1px

Спасибо.

Базовая линия смещается, как уже сказал Great Rash

[vahrusha]

Спасибо за помощь, теперь разобрался.