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

Сообщение сайта

(Сообщение закроется через 3 секунды)

Здравствуйте, гость (

| Вход | Регистрация )

SEO форум MaulTalk.com > Веб-строительство > Программная часть

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

Опции

vahrusha

Topic Starter сообщение

22.7.2010, 21:04; Ответить: vahrusha

Сообщение #1

Группа: User
Сообщений: 2
Регистрация: 22.7.2010
Поблагодарили: 0 раз
Репутация:

Здравствуйте, уважаемые.
Никак не могу понять, почему во всех браузерах, кроме 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
}

Вот что получается:
[IMG]http://spb-mitsar.ru/sample.gif[/IMG]

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

Ответить с цитированием данного сообщения

Arks Arks 22.7.2010, 21:49; Сообщений: 2780 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	22.7.2010, 21:49; Ответить: Arks Сообщение #2
0 Группа: User Сообщений: 2780 Регистрация: 20.3.2010 Поблагодарили: 0 раз Репутация: 0	Потому что в классе padding-top:2px; тогда как в других 1px, такова особенность обработки padding'ов. Пользуйтесь display:block(аналог div'а) и float:left

vahrusha

Topic Starter сообщение

22.7.2010, 22:02; Ответить: vahrusha

Сообщение #3

Группа: User
Сообщений: 2
Регистрация: 22.7.2010
Поблагодарили: 0 раз
Репутация:

Но ведь, в том клаcсе, где padding-top:2px - height тоже меняется и становится 18px (вместо 19px). По идее итоговая высота должна оставаться одинаковой.
Сделал, по Вашему, спасибо за ответ.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Как поисковик реагирует на display none? Сабж.	13	stixia007	4491	14.9.2018, 15:56 автор: falselight
Изменение дизайна шаблона Joomla	0	neesupermario	1819	3.1.2018, 15:20 автор: neesupermario
Изменение шрифта в placeholder	6	Alexej_mw	2465	24.8.2017, 12:10 автор: Alexej_mw
Изменение цвета в шаблоне	18	shulz	3168	5.12.2016, 17:11 автор: shulz
Изменение адресов у большого количества страниц	8	ToshuK	2587	1.8.2016, 14:07 автор: WoWeb

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 25.4.2024, 3:30

Дизайн