Win 8、Win 8.1 + IE 11 修复定位错误

Posted

技术标签:

【中文标题】Win 8、Win 8.1 + IE 11 修复定位错误【英文标题】：Win 8, Win 8.1 + IE 11 Fixed Positioning Bug 【发布时间】：2014-02-05 03:03:22 【问题描述】：

我正在处理 Windows 8 和 Windows 8.1 上 IE 11 的奇怪行为。我正在固定定位元素内的元素位置。而且它变得很奇怪。当我使用开发工具检查它时它在正确的位置，但在视觉上它完全在不同的位置。我发现如果我暂时禁用父元素的位置规则然后再次启用它，子元素之后会正确呈现。 Win 7 上的 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"   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"  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"  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"  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"  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"  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/

如果您幸运地没有看到问题，请尝试调整结果窗格的大小（在某些维度上，有时它会正确呈现）。

【问题讨论】：

桌面版 IE11 也面临这个问题，或者您可能只在“现代 UI”版 IE 中尝试过？因为它们以前是两个不同的程序，具有不同的引擎（虽然在许多地方显然很常见） 仅在桌面版本中尝试过，而不是在新的“metro”（或现在的名称）版本中。 我很抱歉这么说，但如果你不格式化你的代码可读我不会帮助你... 【参考方案1】：

如果您有背景颜色/图像并且元素固定在其上，则必须删除该元素的背面以避免重新绘制问题。添加这些属性并移除可见性。

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

为什么display而不是visibility，因为visibility只是隐藏了上下文，这不会改变它与其他元素的交互。

【讨论】：

以上是关于Win 8、Win 8.1 + IE 11 修复定位错误的主要内容，如果未能解决你的问题，请参考以下文章

微软警告 Windows 8.1 用户：系统即将停止支持，建议购买 Win11/10 新设备

IE浏览器爆发高危漏洞：4年来所有版本Win10均需打补丁

微软警告 Windows 8.1 用户：系统即将停止支持，建议购买 Win11/10 新设备

windows 8.1哪个版本好

什么情况下需要检测预装Win8/8.1电脑内置激活密钥（即Win8/8.1 OEM key）？

win8.1升级win10怎么在换回8.1