Opera 9.0

Metus · September 14, 2011

Есть код html:

                <ul id="menu"><!--
                 --><li>
                        <a href="/">Компания Нефтегазкомплект</a>
                        <span>Компания Нефтегазкомплект</span>
                    </li><!--
                 --><li>
                        <div class="menu_separator"></div>
                        <a href="/">О нас</a>
                        <span>О нас</span>
                    </li><!--
                 --><li>
                        <div class="menu_separator"></div>
                        <a href="/">Поставляемое оборудование</a>
                        <span>Поставляемое оборудование</span>
                    </li><!--
                 --><li>
                        <div class="menu_separator"></div>
                        <a href="/">Контактная информация</a>
                        <span>Контактная информация</span>
                    </li>
                </ul>

И вот к нему стиль:

#menu
{
    min-width: 500px;
}
#menu > li
{
    display: inline-block;
    position: relative;
}
/* ссылка и её тень */
#menu > li > a, #menu > li > a + span
{
    display: block;
    height: 53px;
    line-height: 52px;
    white-space: nowrap;
    padding: 0px 60px;
    text-decoration: underline;
}
#menu > li > a
{
    color: white;
    position: relative;
    z-index: 1;
}
#menu > li > a + span
{
    position: absolute;
    margin-top: -52px;
    margin-left: 1px;
    color: black;
}
#menu > li > a:hover
{
    color: #005d20;
}
#menu > li > a:hover + span
{
    color: #a8ffa0;
    background-image: url("../images/menu_green.jpg");
    background-position: center;
    background-repeat: repeat-x;
}
/* разделитель */
#menu > li > div.menu_separator
{
    display: block;
    position: absolute;
    width: 2px;
    height: 53px;
    margin-left: -1px;
    background-image: url("../images/menu_separator.jpg");
    background-position: center;
    background-repeat: no-repeat;
}

Проблема в том, что в опере 9.0 ссылка <a> НЕ перекрывает <span>.

Edited September 14, 2011 by Metus

Bonzash · September 14, 2011

Мб для начала обновиться на более новую версию?

Metus · September 14, 2011

Я верстаю сайт.

В т.з. написано с Opera 9.0

SelenIT · September 14, 2011

Раздайте <a> и <span>-у явные z-index'ы, например, первой 2, второму 1.

psywalker · September 14, 2011

Я верстаю сайт.
В т.з. написано с Opera 9.0

Написать можно всё что угодно. Это уже похоже на шаблон. Ты спроси у того, кто это писал, зачем ему этот браузер, и если он сможет внятно и чётко дать ответ (в чём я оооочень сомневаюсь), то тогда работай.

Metus · September 14, 2011

Раздайте <a> и <span>-у явные z-index'ы, например, первой 2, второму 1.

Пробовал - не помогает, пробовал даже ссылке в задний фон ставить прозрачную картинку с repeat - не помогает.

Нашёл причину. Она в inline-block.

Без него всё как надо.

Но не могу понять, почему так.

Edited September 14, 2011 by Metus

Gaspode · September 14, 2011

Потому что опера 9 корява, очевидно же. :yahoo:

SelenIT · September 14, 2011

А доктайп случайно не transitional? В transitional-доктайпах inline-block в Операх (даже новых) ведет себя как попало (не равняется по вертикали и т.п.). Вообще transitional-доктайпы — зло и нарушение духа HTML4/XHTML1, уж лучше 1-2 ошибки валидатора при Strict, чем узаконенное право браузера нарушать спеку (aka "почти стандартный режим" aka "limited quirks mode"), пусть даже и в мелочах. А вообще настоящий доктайп — это <!DOCTYPE html>, а что сверх того — то от лукавого

Metus · September 14, 2011

Strict:

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

В итоге забил на display: inline-block и сделал float: left

Sign In

Opera 9.0

Question

Metus

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Bonzash

Link to comment

Share on other sites

Metus

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Metus

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Metus

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information