css - Win 8, Win 8.1 + IE 11 固定定位错误-6ren

css - Win 8, Win 8.1 + IE 11 固定定位错误

转载作者：技术小花猫更新时间：2023-10-29 11:24:47

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

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

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

最佳答案

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

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

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

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

文章推荐： linux - Cron 启动同一个进程两次

文章推荐： linux - perl 库路径

jQuery追加()定位
我必须从我的网站中删除()一些iem，然后将它们追加()回来，但是当我追加它们时，它们出现在不同的地方，而我希望它们完全显示在它们以前的同一个地方是。有什么解决办法吗？这是一个沙箱，请随意更新(注
CSS - 定位
一个。图片 (960x7)b. div(宽度:960，填充:10) 我想定位 (a)，使其距顶部 50 像素，居中。我想将 (b) 放置在 (a) 的正下方，没有空格。我的 CSS 如下: @cha
CSS 定位
放置某物的正确方法是什么？我有一个在中心显示博客文章的 div。 "" rel="bookmark"> BY LOUIS MOORE ON " pubdate>
CSS 定位
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭1
CSS 定位
我已经成功地使用了 position:fixed 设置 CSS/CSS3 并且工作得很好! 我几天前看到了这个，想知道他们是如何实现向下滚动时发生的效果的，菜单栏在滚动前处于一个位置，然后转到顶部并自
CSS:定位
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 7 年前。 Improv
slate源码解析（三）-定位
接口定义能够对于文字、段落乃至任何元素的精准定位并做出增删改查，都是在开发一款富文本编辑器时一项最基本也是最重要的功能之一。让我们先来看看Slate中对于如何在文档树中定位元素是怎么定义的
WPF tabitem 定位
例如，使用 WPF 在选项卡控件的最左上角定位三个 tabitem 和在最右上角定位一个 tabitem 的正确方法是什么？我尝试通过更改边距将第四个 tabitem 向右移动，但这并没有产生好的结
javascript - 眼睛跟随光标 - 定位？
我正在尝试使用 Javascript 创建一个跟随鼠标在页面上移动的东西。我希望它是米老鼠，我希望他的眼睛跟随鼠标移动他的眼球...这是我到目前为止的代码(从网络上的各个地方收集，因此归功于编写该部分
arduino - 射频三角测量(定位)
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭 9 年前。 Improve
Java GUI - 定位
我试图将两个按钮放置在左上角。但它们始终位于顶部中心。我已经尝试过这个: jp = new JPanel(); jp.setLayout(new GridBagLayout()); GridBagC
jQuery Slide Down 定位
我在使用 JQuery 向下滑动功能时遇到问题。我可以让它正常工作，但是我向下滑动的元素的位置会根据视口(viewport)的大小而变化。我想做的是将它与它滑动的元素联系起来。 This JSfidd
javascript游戏 Sprite 定位
我正在尝试创建一个棋盘，并将其放置在屏幕中间，但到目前为止我无法将它直接放在中间。我不想将位置硬编码到屏幕上，因为我要处理不同的屏幕尺寸。 var winsize = cc.director.
mysql - 定位、子串查询
我正在尝试从 mysql 中的 2 个字符串点之间提取数据，我的示例脚本是 'otherdata&p1=textneeded&otherdata' 我需要拉出“textneeded”位，“P1=”是起
按钮的 JavaFX 定位
如何在 JavaFX 中设置按钮的位置？我的代码: bZero = new Button(); bZero.setPrefSize(45, 20); mainPane.getChildren().ad
iphone - 定位 UIScrollView
我有一个 iPhone 应用程序，我可以在其中显示一系列图像。当用户点击图像时，我需要将该图像带到第一个位置，表明它是所选图像。我可以通过子类化实现 uiscrollview 中的点击。但是我无法将
使用导航栏的 CSS 定位
在下图中，它显示了一个image、textbox 和一个css menu image 我的 CSS 菜单非常完美。我终于按照我需要的方式得到了它。我的问题是我需要导航栏中央的文本框，然后我需要我的图像
html - CSS 定位
我必须创建一个看起来像这样的 div id为2的div应该出现在图片的右下角，图片的大小不固定id=2的div应该应用什么css id =1 的 div 没有定义位置，所以使用默认值，图像也是
文本和图像在同一行的 CSS 定位
如何将我的文本和图像对齐在同一行？每当我使用 padding 或 margins 时，它就会崩溃到我正在使用的圆形图像中。 #alignPhoto { padding-right: 50px;
使用页面引用的 CSS 定位
简单的问题，如何定位具有整个页面引用的元素？在我的例子中，我在标题中得到了一个 float 图像，然后是 2 组标题。当我使用时: text-align: center; 它使用图像宽度端和页面其余

技术小花猫

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - Win 8, Win 8.1 + IE 11 固定定位错误