ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Выравнивание элемента inline-block по baseline -- в Хроме как надо, в остальных -- криво
11 сообщений из 11, страница 1 из 1
Выравнивание элемента inline-block по baseline -- в Хроме как надо, в остальных -- криво
    #37847584
Сирин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сирин
Участник
Посмотреть можно здесь . Комбобокс выпадает из ряда.
...
Рейтинг: 0 / 0
21.06.2012, 08:41:47
| Ответить | Цитировать | Написать  
Выравнивание элемента inline-block по baseline -- в Хроме как надо, в остальных -- криво
    #37847594
Сирин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сирин
Участник
Если .select-container сделать inline, то комбобокс встанет на своё место, но overflow не будет работать.
...
Рейтинг: 0 / 0
21.06.2012, 08:53:49
| Ответить | Цитировать | Написать  
Выравнивание элемента inline-block по baseline -- в Хроме как надо, в остальных -- криво
    #37847595
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
Сирин,

а через float не?
...
Рейтинг: 0 / 0
21.06.2012, 08:54:46
| Ответить | Цитировать | Написать  
Выравнивание элемента inline-block по baseline -- в Хроме как надо, в остальных -- криво
    #37847605
Сирин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сирин
Участник
Надо тогда будет переделывать всю вёрстку, страниц много, элементов много, ещё неизвестно чем это аукнется. Можно тупо конкретно в этой панели задать всем виджетам выравнивание top, но меня всё равно интересно, почему именно такое поведение в Фоксе, Опере и IE, а в Хроме как надо? Потом, если поместить текст между виджетами, то будет видно, что именно комбобокс выравнен baseline, а остальные словно middle.
...
Рейтинг: 0 / 0
21.06.2012, 09:01:33
| Ответить | Цитировать | Написать  
Выравнивание элемента inline-block по baseline -- в Хроме как надо, в остальных -- криво
    #37847606
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
СиринКомбобокс выпадает из ряда.
Дело не в комбобоксе... Сам ДИВ select-container располагается не так как тебе нужно.

 
нажать тут
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.select-arrow-down-image
{
	background: transparent center right no-repeat scroll url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAYAAAAPDoR2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk5Nzc1OTYwOUJGNDExRTE5OEI1RDFDRUQ0NEY3MUY4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk5Nzc1OTYxOUJGNDExRTE5OEI1RDFDRUQ0NEY3MUY4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTk3NzU5NUU5QkY0MTFFMTk4QjVEMUNFRDQ0RjcxRjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTk3NzU5NUY5QkY0MTFFMTk4QjVEMUNFRDQ0RjcxRjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz46oHb6AAAAWUlEQVR42mJhYGBIAeJCIGYE4v8MCLAOJMAMxJuAWAFJ8iMQuzIBiX9A3AIVZILiPiD+yQRVfQKI90HZV4F4LRD/ZYDaBQJCQHwMiDUYsACQ3XJIihkAAgwAHlAPyrDunggAAAAASUVORK5CYII=");
}

.panel
{
	padding: 10px;
	border-radius: 4px;
	background-color: #f1f1f1;
	box-shadow: 0 3px 3px -1px #bfbfbf;
}

input[type="text"],
input[type="file"],
input[type="password"],
textarea
{
	margin: 0;
	padding: 4px;
	border-radius: 3px;
	border: 1px solid #b6b6b6;
	border-top-color: #a3a3a3;
	border-bottom-color: #cacaca;
	box-shadow: 0 1px 2px 0 #cecece inset;
	font-size: 8pt;
	font-family: Arial,Helvetica,sans-serif;
	width: 150px;
	display: inline-block;
	vertical-align: baseline;
}

.select-container
{
	display: inline-block;
	width: 160px;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: baseline;
	background-color: red;
}

.select-container select1
{
	position: relative;
	left: -160px;
	opacity: 0;

	width: 160px;
	padding: 4px 4px;
}

.select-container input[type="text"],
.select-container input[type="text"]:disabled
{
	color: #000;
	position: relative;
	width: 138px;
	padding-right: 16px;
	background-color: #fff;
	background-position: 144px center;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="panel">
	<input type="text" id="" name="q" value=""/>
	<div class="select-container">
		test
		<!--
		<input type="text" readonly="readonly" tabindex="-1" class="select-arrow-down-image" value="Все категории" />
		<select id="catid" name="catid">
			<option value="0">Все категории</option>
			<option value="2">Транспорт</option>
			<option value="3">Недвижимость</option>
			<option value="4">Работа</option>
			<option value="5">Барахолка</option>
			<option value="6">Техника, Электроника</option>
			<option value="7">Животные</option>
			<option value="8">Хобби и Спорт</option>
			<option value="9">Для бизнеса</option>
		</select>
		-->
	</div>
	<button    type="submit">Найти</button>
	<button    type="button" class="all-categories">Весь каталог</button>
</div>
</body>
</html>

...
Рейтинг: 0 / 0
21.06.2012, 09:02:04
| Ответить | Цитировать | Написать  
Выравнивание элемента inline-block по baseline -- в Хроме как надо, в остальных -- криво
    #37847608
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Похоже на очередную попытку "не применять таблицы"...
...
Рейтинг: 0 / 0
21.06.2012, 09:04:46
| Ответить | Цитировать | Написать  
Выравнивание элемента inline-block по baseline -- в Хроме как надо, в остальных -- криво
    #37847618
Сирин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сирин
Участник
Об этом div и речь. Он и есть inline-block элемент. Комбобоксом я назвал весь виджет -- div и его внутренние input и select.
...
Рейтинг: 0 / 0
21.06.2012, 09:12:29
| Ответить | Цитировать | Написать  
Выравнивание элемента inline-block по baseline -- в Хроме как надо, в остальных -- криво
    #37847620
Сирин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сирин
Участник
krvsaПохоже на очередную попытку "не применять таблицы"...
Причём тут таблицы? Выше я написал рабочее решение -- всем впаять vertical-align: top, но хочется понять, почему baseline не срабатывает.
...
Рейтинг: 0 / 0
21.06.2012, 09:14:41
| Ответить | Цитировать | Написать  
Выравнивание элемента inline-block по baseline -- в Хроме как надо, в остальных -- криво
    #37847728
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
СиринВыше я написал рабочее решение -- всем впаять vertical-align: top
Таки используй его.
Но при таком раскладе никакой центровки по вертикали не будет...
Сиринно хочется понять, почему baseline не срабатывает.
Оно и
Код: css
1.
display: inline-block;


не в каждом браузере сработает...

Верояно у ДИВа с таким значением свойства свое понимание расположения "базовой линии"...
...
Рейтинг: 0 / 0
21.06.2012, 10:15:59
| Ответить | Цитировать | Написать  
Выравнивание элемента inline-block по baseline -- в Хроме как надо, в остальных -- криво
    #37848727
Сирин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сирин
Участник
Ещё проблема: почему-то в 12 Опере select (не список) виден, не смотря на opacity: 0. Что за фигня?
...
Рейтинг: 0 / 0
21.06.2012, 15:55:48
| Ответить | Цитировать | Написать  
Выравнивание элемента inline-block по baseline -- в Хроме как надо, в остальных -- криво
    #37854774
Сирин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сирин
Участник
Нашёл причину 1-й проблемы здесь . Как-то влияет overflow: hidden на блок, и похоже, что Фокс и Опера правильно рисуют, а Хром неправильно, но красиво :) Добавление overflow: -moz-hidden-unscrollable; помогло Фоксу.
...
Рейтинг: 0 / 0
26.06.2012, 12:53:48
| Ответить | Цитировать | Написать  
11 сообщений из 11, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Выравнивание элемента inline-block по baseline -- в Хроме как надо, в остальных -- криво
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=164&tid=1449643]:
 0ms
get settings:
 8ms
get forum list:
 13ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 58ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 27ms
get tp. blocked users:
 1ms
others: 210ms
total:  329ms
созд. / загр.: 329ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]