Ссылки с плавающим блоком не работают в IE - PullRequest
Новая
       3

Ссылки с плавающим блоком не работают в IE

2 голосов
/ 21 июня 2010

У меня есть следующий HTML: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            #nav {
                float: left;
                width: 10em;
            }

            #nav ul {
                list-style: none;
                margin: 0;
                padding: 0 20px;
            }

            #nav li {
                margin-top: 9pt;
                position: relative;
            }

            #nav a {
                border: solid 1px black;
                display: block;
                width: 10em;
                padding: 3px 0;
            }
        </style>
    </head>
    <body>
        <div id="container1">
        <div id="container2">
            <div id="nav">
                <ul>
                    <li><a href=".">Welcome</a></li>
                    <li><a href="news">News</a></li>
                    <li><a href="#">About</a>
                        <ul>
                            <li><a href="faq">FAQ</a></li>
                            <li><a href="charity">Charity</a></li>
                            <li><a href="committee">Committee</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
           <div id="section">If this p is here, the block links no longer work.<br><br><br></div>
       </div>
       </div>
       </div>
    </body>
</html>

В IE8 текст в #section не позволяет пробелу в ссылке на блок быть ссылкой.Хотя справа есть текст, пробелы в ссылках разрываются.Когда #section div заканчивается, ссылки работают нормально, и все это ссылка, а не просто текст.

Как бы я мог сделать весь элемент ссылкой все время, а не только текст, когда# раздел div мешает?Я пробовал z-order безрезультатно.

Ответы [ 3 ]

0 голосов
/ 21 июня 2010

После опробования вашего кода я обнаружил, что ссылки отлично работают для меня с вашим кодом, как он размещен выше; Я справился с вашей проблемой, только когда #section div был относительно позиционирован. В этом случае #section размещается выше ссылок и фактически покрывает их. Вот почему похоже, что ссылка просто не работает. Поместите цвет фона на #section, и вы поймете, что я имею в виду.

Вы можете исправить это, используя свойство z-index. Установите для него значение около 10 для #nav li и используйте любое число, большее, чем для #section и , если оба этих элемента относительно расположены , вы должны увидеть ссылки сверху #section дел. Это должно выглядеть примерно так:

#nav li { margin-top: 9pt; position: relative; z-index: 10; }

#section { position: relative; z-index: 20; }

Чтобы узнать больше о позиционировании, в CSS-Tricks есть очень хорошая статья, которую вы можете прочитать: http://css -tricks.com / absolute -lative-fixed-fixed-positioining-how-do-они-отличаются /

0 голосов
/ 21 июня 2010

Решением было добавить цвет фона к # nav

0 голосов
/ 21 июня 2010

Либо удалите width: 10em; в вашем стиле #nav, либо измените его на width: 210px;.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...