我正在处理 IE 11 在 Windows 8 和 Windows 8.1 上的奇怪行为。我正在固定定位元素内的元素位置。而且它变得很奇怪。当我用开发工具检查它时它在正确的位置，但在视觉上它完全在不同的地方。我发现如果我暂时禁用父元素的位置规则然后再次启用它，子元素之后会正确呈现。 Win 7 上的 IE 11 没有这个问题。

HTML:

    

        

            




    

        

            

                ×
            

            

            

                


        

        Test1
        

            
Cool

        

        01/02/2014 20:01
    


        

        Owner
        

            
Thanks

        

        01/02/2014 20:09
    


        

        Owner
        

            
Thanks

        

        01/03/2014 11:38
    


        

        Owner
        

            
Thanks

        

        01/03/2014 12:13
    


        

        Owner
        

            
Thanks

        

        01/03/2014 12:14
    

            

        

    


    

        

            
        

        Add
    


            

        

    


Xem sitemap của VNExpress

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;
  đường viền: không có;
}

.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;
  căn chỉnh văn bản: ở giữa;
}

.modal-footer {
  căn chỉnh văn bản: ở giữa;
  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;
  căn chỉnh văn bản: ở giữa;
  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;
  căn chỉnh văn bản: ở giữa;
  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 {
  lề trên cùng: 0;
  đường viền: không có;
  cursor: auto;
}

.comment {
  vị trí: tương đối;
  width: 80%;
}
.comment small {
  hiển thị: khối;
  font-size: 80%;
}
.comment .user {
  trang trí văn bản: không có;
  color: #0d4ca6;
}
.comment .well {
  margin-bottom: 0;
}
.comment .avatar {
  vị trí: tuyệt đối;
  width: 50px;
  height: 50px;
}
.comment.guest {
  float: left;
  căn chỉnh văn bản: trái;
}
.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: phải;
  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: phải;
}
.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;
  căn chỉnh văn bản: ở giữa;
  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 {
  lề trên cùng: 0;
  đường viền: không có;
  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;
  vị trí: cố định;
  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;
  căn chỉnh văn bản: ở giữa;
}
@media (min-width: 768px) {
  #photo-modal .modal-dialog, #photo-modal form {
    chiều rộng: tự động;
    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);
    } khác {
        $form.css('margin-bottom', 0);
    }

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

我在这里创建了 fiddle :http://jsfiddle.net/SovietSam/TmmAV/

如果您很幸运没有看到问题，请尝试调整结果 Pane 的大小(在某些维度上有时它会正确呈现)。

câu trả lời hay nhất

如果您有背景颜色/图像，并且某个元素固定在其上，则必须移除该yếu tố của背面 以避免重绘问题。添加这些属性并删除可见性。

CSS:

#photo-modal form {
  ...
  hiển thị: không có;
  backface-visibility: hidden;
}

JS:

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

Tại saotrình diễnthay vì可见性,bởi vì可见性只是隐藏上下文，这不会改变它与其他元素的交互。

关于css - Win 8, Win 8.1 + IE 11 固定定位错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21157842/