Win 8, Win 8.1 + IE 11 Fixed Positioning Fehler

Ich habe mit wierd Verhalten von IE 11 unter Windows 8 und Windows 8.1. Ich fixiere die Position des Elements innerhalb des fest positionierten Elements. Und es wird komisch. Es ist an der richtigen Stelle, wenn ich es mit Dev-Tools inspiziere, aber visuell komplett an anderer Stelle. Ich habe herausgefunden, dass, wenn ich die Positionsregel des Elternelements vorübergehend deaktiviere und sie dann wieder aktiviere, das Kindelement danach korrekt gerendert wird. IE 11 auf Win 7 hat dieses Problem nicht.Win 8, Win 8.1 + IE 11 Fixed Positioning Fehler

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'); 
    } 
}

ich Geige hier erstellt: http://jsfiddle.net/SovietSam/TmmAV/

Wenn Sie Glück haben, um nicht zu sehen das Problem, versuchen Sie, die Größe des Ergebnisfensters zu ändern (in manchen Dimensionen wird es manchmal korrekt gerendert).

Quelle

2014-01-16 SovietSam

Das Problem ist auch in der Desktop-Version von IE11 konfrontiert, oder vielleicht haben Sie nur in der "modernen UI" Version von IE versucht? Denn sie sind früher zwei verschiedene Programme, mit unterschiedlichen Motor (obwohl offensichtlich in vielen Orten üblich) –

Versucht nur in der Desktop-Version, nicht in der neuen "Metro" (oder wie es jetzt heißt) Version. – SovietSam

tut mir leid zu sagen, aber ich werde Ihnen nicht helfen, wenn Sie nicht Ihren Code lesbar formatieren ... – dude

Wenn Sie eine Hintergrundfarbe/Bild haben und ein Element auf ihm befestigt ist, müssen Sie die Rückseiten entfernen dieses Element Probleme Neulackierung zu vermeiden. Fügen Sie diese Eigenschaften hinzu und entfernen Sie die Sichtbarkeit.

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');

Warum Anzeige statt Sichtbarkeit, weil Sichtbarkeit nur den Kontext versteckt, dies nicht ändert seine Wechselwirkung mit anderem Element s.

Quelle

2014-11-23 11:50:25 Outcast

Win 8, Win 8.1 + IE 11 Fixed Positioning Fehler

Antwort

Verwandte Themen