Блочная ссылка, вылезающая за границы предка

[SelenIT]

Имеется ряд ссылок с display:block, выступающих за границы родительского элемента с display: inline-block (живой пример — главное меню на www.zgames.com). В IE7-8, FF и Вебкитах это работает как ожидается, но в актуальных Операх (как минимум начиная с 10.61, включая альфу 11) и IE9 beta в режиме IE9 наблюдается странная вещь: нижние выступающие части ссылок почему-то некликабельны, а в Операх вдобавок текст этих выступающих частей исчезает при скроллинге и появляется заново только после наведения. Неужели так и должно быть по стандарту? Буду крайне благодарен за подсказку, какому месту стандарта противоречит такая конструкция.

Задача, для которой понадобился такой изврат — возможность менять цвет иконок меню (на внутр. страницах) из админки, независимо от цвета ссылок. Цвет заливки просвечивает через иконки, "вырезанные" из нейтрального фона (по типу маски). Заливать всю ссылку нельзя, т.к. при отключенных картинках текст может слиться с фоном. Тривиально решается доп. блоком внутри ссылки (скорее всего, так и сделаю), но всё равно интересно узнать, можно ли реализовать ее без добавочной разметки...

[eyexal]

у .nav li убрать height:97px;

[psywalker]

А я чё то не понял, в чём подвох. Попробовал воплотить у себя, всё вроде работает, правда так делаю.

Картинки 50х50

	.ul { list-style: none; overflow: hidden;}				
		.ul li {
			display: inline-block; 

			width: 70px;
			height: 70px;
			margin-left: 4px; 
			background: url(../../../../img.jpg) left top no-repeat; 
		}
			.ul li a { display: block; padding-top: 50px; }
			.ul li a:hover { text-decoration: none;}
	<ul class="ul">
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт 2</a></li>
		<li><a href="#">Пункт 3</a></li>
		<li><a href="#">Пункт 4</a></li>
		<li><a href="#">Пункт 5</a></li>
	</ul>

[SelenIT]

eyexal, так почему всё-таки эта высота так влияет? Не помогает даже position:relative (для обоих действующих лиц). Убрать высоту не вариант (до смены разметки). Менять разметку, видимо, придется, но хочется узнать, где в такой конструкции нарушение стандарта...

psywalker, подвох появляется, когда высота ссылки оказывается больше высоты li-шки.

[psywalker]

psywalker, подвох появляется, когда высота ссылки оказывается больше высоты li-шки.

А зачем высоту ставить больше?

[SelenIT]

Ради возможности сделать фон (просвечивающий через дырку в картинке и дающий эффект "перекраски" иконок) и текст одного цвета, но разнести их в пространстве, чтоб не сливались. Но что делать, раз нельзя, значит нельзя - придется добавлять в ссылку span (для иконки) и задавать фон ему...