Исправлено позиционирование в Internet Explorer?

Я просто написал образец страницы с угловым баннером и всплывающей подсказкой. С firefox все работает нормально. Но в IE все работает некорректно. Я поискал в Интернете и обнаружил, что IE не поддерживает position: fixed.
Так кто-нибудь знает, как обойти эту проблему?
Вот мой исходный код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>

    <style type="text/css">
 .tooltip {
    width: 200px;
    position: fixed;
    top:auto;
    bottom:70px;
    right:70px;
    left:auto;
    font-family: Verdana, Geneva, sans-serif;
    font-size: xx-small;
}
#cornerbanner {
    position: fixed;
    top:auto;
    left:auto;
    right:0px;
    bottom:0px;
}
    .tooltip .tooltip_top {
    background-image: url(images/Box_BG_01.png);
    height: 34px;
    background-repeat: no-repeat;
    background-position: center top;
    line-height: 45px;
    text-align: right;
    padding-right: 30px;
    vertical-align: text-bottom;
    font-size: xx-small;
    font-weight: normal;
    overflow: hidden;
}
body {
    background-color: #F90;
}
.content p {
    font-family: Verdana, Geneva, sans-serif;
    color: #000;
    font-size: x-small;
    text-align: justify;
    padding: 15px;
    border: 1px solid #FFF;
}
.tooltip .tooltip_top a {
    text-decoration: none;
    color: #333;
}
    .tooltip .tooltip_con {
    background-image: url(images/Box_BG_03.png);
    background-repeat: repeat-y;
    padding-right: 20px;
    padding-left: 20px;
    display: block;
    clear: both;
    text-align: justify;
    letter-spacing: normal;
}
.content {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
}
    .tooltip .tooltip_bot {
    background-image: url(images/Box_BG_05.png);
    height: 24px;
    background-repeat: no-repeat;
    background-position: center bottom;
}
    .tooltip .tooltip_con #tooltip_link {
    text-align: right;
    color: #666;
    text-decoration: none;
    margin-top: 10px;
}
    .tooltip .tooltip_con #tooltip_link a {
    color: #666;
    text-decoration: none;
}
    .tooltip .tooltip_con img {
    float: right;
    margin-right: 5px;
    margin-left: 5px;
}
    </style>
    <script src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $(".tooltip").fadeOut(0);
          $("#cornerbanner").mouseover(function(){
          $(".tooltip").fadeIn("slow")
          });
          $("#close_tooltip").click(function(){
          $(".tooltip").fadeOut();
          });
        });

    </script>
    </head> 
<body>
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel ligula
        leo, ac aliquet ante. Sed ut elit et purus ultricies ornare. Sed eu justo sem.
        Suspendisse convallis elementum eros, vitae consequat lorem sollicitudin vitae.
        Phasellus bibendum, libero ac semper lobortis, orci tellus lacinia nisl, eget
        luctus risus felis sed dolor. Phasellus commodo imperdiet neque vitae elementum.
        Ut iaculis vestibulum velit cursus blandit. Cras ornare iaculis velit, vitae
        malesuada mi mattis tempor. Ut consequat dapibus massa eget scelerisque. Quisque
        sed suscipit sapien. Duis metus urna, consequat tempor feugiat sit amet, placerat
        non lorem. Integer eget urna elit, et ullamcorper libero. In iaculis aliquet</p>
            <div id="tooltip_link"><a href="http://www.google.com">Click here</a></div>
            </div>
            <div class="tooltip_bot"></div>
    </div>
</body>
</html>

css fixed internet-explorer-6
person taabouzeid    schedule 28.01.2010    source источник
comment
У вас может быть лучший ответ на doctype (doctype.com).   -  person David says reinstate Monica    schedule 28.01.2010

Ответы (4)


arrow_upward
1
arrow_downward

Проблема в том, что самый популярный наиболее часто используемый браузер - Internet Explorer для Windows - не понимает этого, и вместо возврата к position: absolute;, что было бы лучше, чем ничего, он возвращается к position: static;, как указано в CSS. стандарт. Это имеет тот же эффект, что и полное отсутствие position. Обратите внимание, что IE 7 от бета-версии 2 и выше поддерживает position: fixed; (если вы используете объявление типа документа, которое запускает строгий режим), поэтому я исключу IE 7 из этого исправления.

person Kieran    schedule 28.01.2010
comment
Самый популярный не такой, как самый используемый. IE является наиболее используемым на данный момент. - person Rob; 28.01.2010
comment
Я согласен ограбить. Я ненавижу это как разработчик. Даже сам браузер не соответствует требованиям. Как только правительство и крупные корпорации решат использовать что-то лучшее и более функциональное, статистика изменится. - person Kieran; 28.01.2010

arrow_upward
2
arrow_downward

Вы имеете в виду "не работает в IE6"? Следующий CSS с фиксированной позицией отлично подходит для привязки нижнего колонтитула к нижней части страницы в IE7 и IE8:

 Div.Footer { background-color: #f8f7ef; position:fixed; margin: 0px; padding:4px; bottom:0px; left:0px; right:0px; font-size:xx-small; }
person Mark Brittingham    schedule 28.01.2010

arrow_upward
1
arrow_downward 

position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
right: expression(0+((e=document.documentElement.scrollRight)?e:document.body.scrollRight)+'px');

Это поместит элемент в самый верхний правый угол. Если вы хотите разместить его в другом месте, измените 0 в expression(0+( для любого значения

Internet Explorer 6 понимает position:absolute, что является хорошей основой для этой работы. Сходство между absolute и fixed positioning состоит в том, что он удаляет его из потока нормального содержимого. Итак, вы обычно используете позиционирование top и right с небольшим количеством javascript. Я не уверен, как он читает javascript. Но кого это волнует. Оно работает ;)

person Cody Guldner    schedule 18.03.2013

arrow_upward
0
arrow_downward

Вы можете взломать его, используя JavaScript / jQuery.

Например. Что является самым простым Как с помощью jQuery иметь div 'position: fixed' (всегда вверху)?

person Paul D. Waite    schedule 28.01.2010