Opera9, CSS, глюки

kruzer25

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

<>

<html>

<head>

	<style type="text/css">

		.onecrumb {

			position:relative;

			min-width:0px;

			display:inline-block;

		}

		.onecrumb .dropDownContainer {

			position:absolute;

			width:200px;

			right:-170px;

			top:100%;

			display:none;

			border:solid 2px red;

		}

		.onecrumb:hover .dropDownContainer {

			display:block;

		}

	</style>

</head>

<body>

	<p>

		<div style="height:0px;"></div><>

		<span class="onecrumb">

			Hover me!

			<div class="dropDownContainer">

				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

			</div>

		</span>

	</p>

</body>

</html>

В опере8, 8.5, ие7, фф работает так, как и ожидается. В опере 9.5 - почти так, как ожидается (хоть и с глюками). А в опере 9.0, 9.1, 9.24 - через жопу.
Опера 9.1 при наведении мыши на "Hover me":

Опера 9.1, если в .onecrumb .dropDownContainer display:none поменять на display:block - всё правильно:

ИЕ7 при наведении мыши:

ФФ2.0.0.9 при наведении мыши:

Опера 8.5 при наведении мыши (в ней не работает top:100%? Ладно, это уже потом):

Опера 9.5 при наведении мыши (глюки, о которых я говорил, появляются уже на других вещах, которых в этом примере нет, но они некртичны):

sbs-66

попробуй
.onecrumb .dropDownContainer {
position:absolute;
display:none;
}
.onecrumb:hover .dropDownContainer {
display:block;
width:200px;
right:-170px;
top:100%;
border:solid 2px red;
}

kruzer25

В опере 9.1 не помогло. 9.0 - тоже. 9.24 под рукой нет.

sbs-66

В общем, как выяснилось опера внутри себя рендерит правильно, просто до неё не доходит, что .dropDownContainer при наведении перерисовался и его надо отобразить заново. Если навести мышу и нажать alt+tab, а потом опять alt+tab, то видно, что всё правильно показывается.
Вывод - надо дать понять опере, что надо перерисовать всё содержимое .onecrumb
У меня заработал вот такой хак в опере:
.onecrumb {
position:relative;
min-width:0px;
display:inline-block;
}
.onecrumb .dropDownContainer {
position:absolute;
display:none;
width:200px;
right:-170px;
top:100%;
border:solid 2px red;
overflow: show;
}
.onecrumb:hover .dropDownContainer {
display:block;
}
.onecrumb:hover {
position: absolute;
display: block;
}

kruzer25

.onecrumb:hover {
     position: absolute;
     display: block;
    }

Ты ничего не перепутал? У .onecrumb position:relative и display:inline-block.
Что именно нужно поменять в самом первом варианте, по-твоему?

ЗЫ: Самый первый вариант, навёл мышь, AltTab, AltTab обратно - те же глюки.
Вообще, такое ощущение, что область для dropDownContainer она выделяет правильно, вот только содержимое рисует с большим сдвигом, соответственно, часть содержимого в выделенную область не попадает и обрезается.

sbs-66

У меня так всё работает в последней опере (9.24).
Смысл в том, чтобы заставить оперу перерисовать контент. Положение блоков по идее меняться не должно.

kruzer25

У меня так всё работает в последней опере (9.24).

Как именно?
Потому что у тебя там опечатка, ты делаешь position:absolute на сам .onecrumb, а не на .dropDownContainer.

sbs-66

Нету у меня опечатки. Скопируй всё css что я привёл полностью вместо твоего исходного и проверь.
PS. dropDownContainer не получается заставить перерисовать своё содержимое, т.к. менять position у него мы не можем, а других способов я не знаю. Поэтому заставлем перирисовываться его родителя со всем содержимым.

kruzer25

Я не буду пробовать твой вариант, потому что после него _всё_ будет работать не так, как должно.
Я тут запостил корректный код, спрашиваю, почему он не работает в опере9 - а ты мне предлагаешь полностью изменить его. "У меня в винде не получается открыть .avi, что сделать? - Поставить линукс".
Ставить на .onecrumb position:absolute - никоим боком не решение, потому что в родительском блоке не только этот один лежит.

sbs-66

Если у остальных блоков position relative, то по идее ничего сдвинуться не должно, хотя на 100% не уверен, конечно. А вообще если не хочешь пробовать - сам разбирайся. Могу, разве что, как выход преждложить скриптом скрывать и показывать блок, а не css. Тогда он должен перерисвываться.
PS. Вообще проблема в том, что опера не верно понимет inline-block, из-за чего неверно позиционирует dropDownContainer и не перерисовывает его фрагмент. Можешь поменть inline-block на inline и всё будет работать. Может имеет смыс поиграться с другими аттрибутами, чтобы невилировать влияние от inline-block

kruzer25

Если у остальных блоков position relative, то по идее ничего сдвинуться не должно

Вообще-то, в родительский блок напихана куча таких вот .onecrumb

Вообще проблема в том, что опера не верно понимет inline-block

О, а вот об этом я и не подумал.
Но почему она его начала неверно понимать только в 9 версии?

fufa58

Но почему она его начала неверно понимать только в 9 версии?

патамушта там движок был новый
[off]первая тысяча :cool:

[/off]

Оставить комментарий