赢8，赢8.1 + IE 11固定定位错误

时间：2014-01-16 09:25:22

标签： css internet-explorer

我正在处理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" 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/

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

1 个答案:

答案 0 :(得分：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');

为什么显示而不是可见性，因为可见性只是隐藏了上下文，这不会改变其与其他元素的交互。

相关问题
最新问题