Немного неточное выравнивание

novicheG · April 5, 2011

При выравнивании строчных элементов столкнулся со следующей проблемкой: vertical-align:middle немного неточно выравнивает строчный элемент (в случае если контейнер четной высоты px) - в разных браузерах по разному (см. картинку)

собственно код:

HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>1px_top_gap</title>
		<meta name="description" content=""/>
		<meta name="keyword" content=""/>
		<link type="text/css" href="css/styles.css" rel="stylesheet"/>
		<style type="text/css">			
		</style>
	</head>
	<body>
		<div class="search">
			<h2>SEARCH</h2><!--
			--><input class="submit" type="submit" value=""/>
		</div>
	</body>
</html>

CSS:



h2 {
	font: bold 12px Arial, Helvetica, sans-serif;;
}

/*  */
.search {
	width: 215px;
	margin-top: 8px;
	float: right;
	border: 1px solid;
}
.search h2 {
	display: inline;
	vertical-align: middle;
	border: 1px solid;
}
.search .submit {
	width: 30px;
	height: 26px;
	margin-left: 1px;
	vertical-align: middle;
	border: none;
	background: url("../img/search_btn.jpg") no-repeat;
}
/*  */

Можно конечно исправить хаками или сделать чтобы у родителя высота стала нечетной (27px вместо 26px - тогда все ровненько везде, но это как-то не красивый выход), но охота, все таки, узнать можно ли кроссбраузерно решить это?

Edited April 5, 2011 by novicheG

SelenIT · April 5, 2011

Если важны размеры до пикселя и размер шрифта/высота строки тоже известны до пикселя, можно и vertical-align дать конкретное значение в пикселях, должно быть универсально. А так, если свободное пространство нечетное, то при его делении верхняя/нижняя половины заведомо будут на пиксель отличаться, насколько я в курсе, стандарт не регламентирует, какой отдать преимущество...

novicheG · April 6, 2011

Понятно, спасибо! Да, мне в принципе оба варианта подходят - либо делать нечетную высоту либо задавать vertical-align в px т.к. высота фиксированная. Просто охота было именно мнение услышать дабы не изобретать велосипедов.

Sign In

Немного неточное выравнивание

Question

novicheG

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

novicheG

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information