Исправлено позиционирование в Internet Explorer? - PullRequest
Новая
       12

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

1 голос
/ 28 января 2010

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

<!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>

Ответы [ 4 ]

2 голосов
/ 28 января 2010

Вы имеете в виду "не работает в 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; }
1 голос
/ 18 марта 2013 
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. Но кого это волнует. Работает;)

1 голос
/ 28 января 2010

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

0 голосов
/ 28 января 2010

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

например. Каков самый простой способ jQuery иметь div: position: fixed (всегда сверху)?

...