1. дома
  2. Вопрос и ответ
  3. Win 8, Win 8.1 + IE 11 Исправлена ​​ошибка позиционирования

Win 8, Win 8.1 + IE 11 Исправлена ​​ошибка позиционирования

2014-01-16 3 views
6

Я имею дело с странным поведением IE 11 в Windows 8 и Windows 8.1. Я фиксирую положение элемента внутри неподвижного позиционированного элемента. И это выглядит странно. Он находится в правильном месте, когда я проверяю его с помощью инструментов dev, но визуально его полностью в другом месте. Я узнал, что если я временно отключу правило позиции родительского элемента, а затем снова включит его, после этого дочерний элемент будет корректно отображаться. IE 11 на Win 7 не имеет этой проблемы.Win 8, Win 8.1 + IE 11 Исправлена ​​ошибка позиционирования

HTML:

<body style="" class="modal-open"> 

    <div class="container"> 
     <div id="bg-overlay" class="row"> 
      <div class="col-lg-12 col-md-12"> 


<div id="photo-modal" class="modal fade in" style="display: block;" role="dialog" aria-hidden="false"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      </div> 
      <div class="modal-body"><img src="d4wbqxn.jpg" width="1100" height="600" class="img-responsive" style="margin: 0 auto;"></div> 
      <div class="modal-footer" style="padding-bottom: 104px;"> 
       <div id="comments" class="clearfix"><div class="comment guest" style=""> 

     <img src="avatar50x50.png" alt="Avatar" class="avatar img-circle"> 

     <a href="#" class="user" data-id="5">Test1</a> 
     <div class="clearfix"> 
      <div class="well well-sm">Cool</div> 
     </div> 
     <small>01/02/2014 20:01</small> 
    </div><div class="comment owner" style=""> 

     <img src="50x50.jpg" alt="Avatar" class="avatar img-circle"> 

     <a href="#" class="user" data-id="6">Owner</a> 
     <div class="clearfix"> 
      <div class="well well-sm">Thanks</div> 
     </div> 
     <small>01/02/2014 20:09</small> 
    </div><div class="comment owner" style=""> 

     <img src="50x50.jpg" alt="Avatar" class="avatar img-circle"> 

     <a href="#" class="user" data-id="7">Owner</a> 
     <div class="clearfix"> 
      <div class="well well-sm">Thanks</div> 
     </div> 
     <small>01/03/2014 11:38</small> 
    </div><div class="comment owner" style=""> 

     <img src="50x50.jpg" alt="Avatar" class="avatar img-circle"> 

     <a href="#" class="user" data-id="8">Owner</a> 
     <div class="clearfix"> 
      <div class="well well-sm">Thanks</div> 
     </div> 
     <small>01/03/2014 12:13</small> 
    </div><div class="comment owner" style=""> 

     <img src="50x50.jpg" alt="Avatar" class="avatar img-circle"> 

     <a href="#" class="user" data-id="9">Owner</a> 
     <div class="clearfix"> 
      <div class="well well-sm">Thanks</div> 
     </div> 
     <small>01/03/2014 12:14</small> 
    </div></div> 
      </div> 
     </div> 
    </div> 

    <form role="form" class="text-center" style="width: 1100px; left: 401.5px; margin-bottom: 0px; visibility: visible;"> 
     <div class="form-group"> 
      <textarea class="form-control" rows="3" style="height: 35px; overflow: hidden; word-wrap: break-word; resize: horizontal;" placeholder="Comment"></textarea> 
     </div> 
     <button type="button" class="btn btn-primary add">Add</button> 
    </form> 

</div> 
      </div> 
     </div> 
    </div> 

<div class="modal-backdrop fade in"></div></body>

CSS:

.btn { 
    font-weight: normal; 
} 

.btn-default { 
    border-color: #fff; 
} 
.btn-default:hover, .btn-default:focus { 
    background-color: #ecf9fe; 
    border-color: #ecf9fe; 
} 

.btn-danger { 
    background-color: #facc16; 
    border-color: #facc16; 
    color: #313131; 
} 
.btn-danger:hover, .btn-danger:focus { 
    background-color: #f0c105; 
    border-color: #dcb104; 
    color: #242424; 
} 

.modal-content { 
    background-color: #b1e6fb; 
    border: none; 
} 

.modal-header { 
    background-color: #c5ecfc; 
    border: 1px solid #c5ecfc; 
    border-bottom: none; 
    border-radius: 6px 6px 0 0; 
} 

.modal-title { 
    font-family: GardensC, 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    text-align: center; 
} 

.modal-footer { 
    text-align: center; 
    background-color: #9ee0fa; 
    border: 1px solid #9ee0fa; 
    border-top: none; 
    border-radius: 0 0 6px 6px; 
} 
.modal-footer .btn-primary { 
    color: #313131; 
    background-color: #51c7f6; 
    border-color: #51c7f6; 
} 
.modal-footer .btn-primary:hover, .modal-footer .btn-primary:focus { 
    color: #242424; 
    background-color: #3dc1f5; 
    border-color: #3dc1f5; 
} 

#error-message .modal-content { 
    background-color: #2ab9f3; 
    padding: 20px; 
} 
#error-message p { 
    margin: 0; 
    padding-right: 15px; 
    text-align: center; 
    color: #b1e6fb; 
} 

#move-photo-modal .modal-header { 
    background-color: #b1e6fb; 
    border: 1px solid #b1e6fb; 
} 
#move-photo-modal .album { 
    font-size: 17px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    text-align: center; 
    background: #1fa2f0; 
    cursor: pointer; 
} 
#move-photo-modal .album .text { 
    font-family: GardensC, 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    color: #b1e6fb; 
} 
#move-photo-modal .album:nth-child(2) { 
    background: #a6e1fa; 
} 
#move-photo-modal .album:nth-child(3) { 
    background: #9cdcf9; 
} 
#move-photo-modal .album:nth-child(4) { 
    background: #91d7f8; 
} 
#move-photo-modal .album:nth-child(5) { 
    background: #87d2f7; 
} 
#move-photo-modal .album:nth-child(6) { 
    background: #7ccdf7; 
} 
#move-photo-modal .album:nth-child(7) { 
    background: #72c8f6; 
} 
#move-photo-modal .album:nth-child(8) { 
    background: #68c4f5; 
} 
#move-photo-modal .album:nth-child(9) { 
    background: #5dbff4; 
} 
#move-photo-modal .album:nth-child(10) { 
    background: #53baf3; 
} 
#move-photo-modal .album:nth-child(11) { 
    background: #48b5f3; 
} 
#move-photo-modal .album:nth-child(12) { 
    background: #3eb0f2; 
} 
#move-photo-modal .album:nth-child(13) { 
    background: #33abf1; 
} 
#move-photo-modal .album:nth-child(14) { 
    background: #29a6f0; 
} 
#move-photo-modal .modal-footer { 
    margin-top: 0; 
    border: none; 
    cursor: auto; 
} 

.comment { 
    position: relative; 
    width: 80%; 
} 
.comment small { 
    display: block; 
    font-size: 80%; 
} 
.comment .user { 
    text-decoration: none; 
    color: #0d4ca6; 
} 
.comment .well { 
    margin-bottom: 0; 
} 
.comment .avatar { 
    position: absolute; 
    width: 50px; 
    height: 50px; 
} 
.comment.guest { 
    float: left; 
    text-align: left; 
} 
.comment.guest small { 
    margin-left: 10px; 
} 
.comment.guest .user { 
    margin-left: 55px; 
} 
.comment.guest .well { 
    border-color: #facc16; 
    margin-left: 10px; 
    padding-left: 45px; 
    float: left; 
} 
.comment.owner { 
    float: right; 
    text-align: right; 
} 
.comment.owner small { 
    margin-right: 10px; 
} 
.comment.owner .user { 
    margin-right: 55px; 
} 
.comment.owner .well { 
    border-color: #0d4ca6; 
    margin-right: 10px; 
    padding-right: 45px; 
    float: right; 
} 
.comment.owner .avatar { 
    right: 0; 
} 

#move-photo-modal .modal-header { 
    background-color: #b1e6fb; 
    border: 1px solid #b1e6fb; 
} 
#move-photo-modal .album { 
    font-size: 17px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    text-align: center; 
    background: #1fa2f0; 
    cursor: pointer; 
} 
#move-photo-modal .album .text { 
    font-family: GardensC, 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    color: #b1e6fb; 
} 
#move-photo-modal .album:nth-child(2) { 
    background: #a6e1fa; 
} 
#move-photo-modal .album:nth-child(3) { 
    background: #9cdcf9; 
} 
#move-photo-modal .album:nth-child(4) { 
    background: #91d7f8; 
} 
#move-photo-modal .album:nth-child(5) { 
    background: #87d2f7; 
} 
#move-photo-modal .album:nth-child(6) { 
    background: #7ccdf7; 
} 
#move-photo-modal .album:nth-child(7) { 
    background: #72c8f6; 
} 
#move-photo-modal .album:nth-child(8) { 
    background: #68c4f5; 
} 
#move-photo-modal .album:nth-child(9) { 
    background: #5dbff4; 
} 
#move-photo-modal .album:nth-child(10) { 
    background: #53baf3; 
} 
#move-photo-modal .album:nth-child(11) { 
    background: #48b5f3; 
} 
#move-photo-modal .album:nth-child(12) { 
    background: #3eb0f2; 
} 
#move-photo-modal .album:nth-child(13) { 
    background: #33abf1; 
} 
#move-photo-modal .album:nth-child(14) { 
    background: #29a6f0; 
} 
#move-photo-modal .modal-footer { 
    margin-top: 0; 
    border: none; 
    cursor: auto; 
} 

#photo-modal form { 
    background-color: #9ee0fa; 
    border: 1px solid #9ee0fa; 
    border-top: none; 
    border-radius: 0 0 6px 6px; 
    padding: 0 20px 20px; 
    position: fixed; 
    bottom: 0; 
    visibility: hidden; 
    z-index: 1060; 
} 
#photo-modal .modal-header { 
    min-height: 45px; 
} 
#photo-modal .modal-header .close { 
    margin-top: -8px; 
    font-size: 31px; 
} 
#photo-modal .modal-body p { 
    margin: 10px 0 0; 
    text-align: center; 
} 
@media (min-width: 768px) { 
    #photo-modal .modal-dialog, #photo-modal form { 
    width: auto; 
    max-width: 1100px; 
    } 
} 

.form-control:focus { 
    border-color: #2ab9f3; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(42, 185, 243, 0.6); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(42, 185, 243, 0.6); 
}

JS:

$.fn.ready(function() { 
    OnShown(); 
    $('#photo-modal').scroll(OnScroll); 
    $(window).resize(OnScroll); 
}); 

function OnShown() { 
    var $modal = $('#photo-modal'); 
    $modal.find('.modal-footer').css('padding-bottom', $modal.find('form').height() + 20); 
    OnScroll(); 
} 

function OnScroll() { 
    var $modal = $('#photo-modal'); 
    var $dialog = $modal.find('.modal-dialog'); 
    var $footer = $modal.find('.modal-footer'); 
    var $form = $modal.find('form'); 
    $form.width($dialog.width() - 42) 
     .css({ 
      'left': $dialog.offset().left 
     }); 

    var wHeight = $(window).height(); 
    var elTop = $modal.offset().top; 
    var footerTop = $footer.offset().top; 

    var dialogMB = parseInt($dialog.css('margin-bottom')); 
    if ($modal.scrollTop() + wHeight >= $dialog.outerHeight(true) - dialogMB) { 
     $form.css('margin-bottom', dialogMB); 
    } else { 
     $form.css('margin-bottom', 0); 
    } 

    if (footerTop - elTop + $form.outerHeight(true) < wHeight) { 
     $form.css('visibility', 'visible'); 
    } else { 
     $form.css('visibility', 'hidden'); 
    } 
}

я создал скрипку здесь: http://jsfiddle.net/SovietSam/TmmAV/

Если вам повезет, не смотретьпроблема, попробуйте изменить размер области результатов (в некоторых измерениях иногда она отображается правильно).

источник

2014-01-16 SovietSam

+0

Проблема стоит и в настольной версии IE11, или, может быть, вы пробовали только в версии «современного UI» IE? Beacuse они ранее были двумя разными программами, с другим движком (хотя, очевидно, часто во многих местах) –

+0

Пробовал только в настольной версии, а не в новой версии «метро» (или как она называется сейчас). – SovietSam

+0

Мне жаль это говорить, но я не буду вам помогать, если вы не отформатируете свой код, читаемый ... – dude

ответ

0

Если у вас есть цвет фона/изображения и элемент закреплен на нем, вы должны удалить отсев этого элемента, чтобы избежать перерисовки проблем. Добавьте эти свойства и удалите видимость.

CSS:

#photo-modal form { 
    ... 
    display: none; 
    backface-visibility: hidden; 
}

JS:

if (footerTop - elTop + $form.outerHeight(true) < wHeight) 
    $form.css('display', 'block'); 
else 
    $form.css('display', 'none');

Почему дисплей вместо видимость, потому что видимость просто скрывает контекст, это не меняет его взаимодействие с другим элементом s.

источник

2014-11-23 11:50:25 Outcast

Смежные вопросы

 Смежные вопросы