Элемент формы, не учитывающий вертикальное выравнивание CSS в Opera - PullRequest
Новая
       4

Элемент формы, не учитывающий вертикальное выравнивание CSS в Opera

5 голосов
/ 06 июня 2011

Я вставил форму Google Custom Search Engine в панель навигации, но я просто не могу заставить ее выравниваться по центру в Opera. Все браузеры прекрасно соблюдают вертикальное выравнивание (да! Даже IE .. вау!).

Вы можете проверить это на www.micod.cat (сайт не на английском языке, но вы можете легко просмотреть поле поиска в строке меню, справа). Opera выдвигает поле ввода формы вплотную к вершине, и это неправильно.

Вот CSS для этого элемента: 

#menu li.find form div {
   padding: 0;
   margin: 0;
   height: 50px;
   line-height: 50px;
   vertical-align: middle;
}

Какие-нибудь яркие умы, чтобы предложить некоторое понимание, пожалуйста? Большое спасибо!

Ответы [ 3 ]

3 голосов
/ 06 июня 2011

Проблема в том, что Doctype меняет его на строгий, или HTML исправляет его, например, 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

Переходный Doctype XHTML означает, что Opera выполняет рендеринг в режиме «Почти Стандарты», хотя, вполне понятно, почемуповлиять на это я не знаю, - Переключатели Opera Doctype

1 голос
/ 06 июня 2011

Я не знаю почему или что происходит, но размещение &nbsp; перед <input type="q" .. /> исправляет это.

Вам следует дождаться лучшего ответа, но если он не придет, по крайней мере, это сработает.

0 голосов
/ 06 июня 2011

Вы хотите выровнять не контент, а изображение внутри контента. 

#menu li.find form div img{ vertical-align: middle; }

и при просмотре вашего сайта вам понадобится: 

#menu ul.nav li.find { padding-top: 10px; }
...