li:hover в ИЕ7 без js и .htc

23 Апр
2012

Приветствую всех блогаюзеров.
Данная статья посвящается багу
 li:hover
в ИЕ7 и будет интересна всем кто еще по собственному желанию или принудительно верстает с поддержкой ИЕ7, хотя лично я не приветствую поддержку ну очень старых браузеров. Для лучшего понимания статья будет разбита на розделы:

  • Задача;
  • Проблема;
  • Решение.

Итак, поехали!

Задача


Совсем недавно довелось верстать макет со следующими требованиями:

  • Трех-колоночная страница фиксированной ширины, с центральной колонкой которая могла бы (без правки кода) автоматически расширятся при удалении правой или левой (фиксированных) колонки;
  • В левой колонке сделать простое меню с выпадающими списками.

Для реализации первой задачи была выбрана достаточно простая конструкция:

HTML
<div class="site">
	<div class="header">...</div>
	<div class="left">...</div>
	<div class="right">...</div>
	<div class="center">...</div>
	<div class="footer">...</div>
</div>


с достаточно таки стандартным css для решения даной задачи:

CSS
...
.left{
	width:150px;
	float:left;
}
.right{
	width:160px;
	float:right;
}
.center{
	overflow:hidden;
}
...


И соответственно для второй задачи, в которой и проявляется баг ИЕ7, был выбран следующий код:

HTML
<ul class="menu">
	<li><a href="#">link1</a></li>
        <li>
		<a href="#">link2</a>
		<ul class="menu">
			<li><a href="#">link1</a></li>
		        <li><a href="#">link2</a></li>
		</ul>
	</li>
        ...
</ul>


И css:

CSS
ul.menu{
	list-style:none;
	margin:0;
	padding:0;
}
.menu a{
	display:block;
}
.menu li{
	position:relative;
}
.menu .menu{
	display:none;
	position:absolute;
	z-index:10;
	left:100%;
	top:0;
	width:250px;
}
.menu li:hover > .menu{
	display:block;
}


На данном этапе пока все работает отлично.

Проблема


заливаем контент в левую и правую колонки и все работает отлично даже в ИЕ7. колонки не расползаются, выпадающее меню выпадает. Но, при заполнении контентом центральной колонки в ИЕ7
li:hover
начинает отказываться работать если напротив
li
находится любого рода контент. Ситуация не спасал и
margin-left:170px;
для центральной колонки.

Решение


Для решения данной проблемы я сразу же решил погуглить, но ничего кроме js и .htc решений я там не обнаружил. Ведь не хотелось нагружать страничку скриптом для решения этой проблемы в ИЕ7, тем более поддержка ИЕ6 не требовалась, поэтому скрипт был бы единственным на странице и поэтому я решил немного поэксперементировать с CSS в надежде найти комбинацию стилей которая бы решила эту проблему.
Само решения я обнаружил достаточно быстро. Оно заключалось всего в одном свойстве CSS, которое пришлось «захачить» для ИЕ7.

CSS
.center{
	overflow:hidden;
	//float:left; /*IE7 hack*/
}


float
для центральной колонки в любую сторону решает проблему и
li:hover
начинает работать. Из-за того что данная опция во всех остальных браузерах разваливает страницу ее пришлось «захачить» спецом для ИЕ7.

Вот собственно и все. Надеюсь что данная статья кому-нибудь будет полезной при решении подобных проблем из-за прихотей заказчиков.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх