Question

我有一个位置：在一个模态中固定div，其中bootstrap应用了transform：translate规则。它在FF和Chrome中运行良好，但在IE 11中无法正确显示。

您可以在此处查看问题：http://jsfiddle.net/roahda03/23/

这是CSS：

    @import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' );
.modal-open .modal {
   //overflow: hidden;
 }
 .modal-body {
   height: calc(100vh);
   overflow-y: scroll;
 }

 #getFixed {
   position: relative;
   left: 10px;
   width: 500px;
 }

和jquery应用于滚动

jQuery(function($) {
  function fixDiv() {
    var $cache = $('#getFixed');
    if ($('.modal-body').scrollTop() > 50)
    {
    $cache.css({
        'position': 'fixed',
        'top': '0px',
        'left': '25px',
        'width': '500px'
      });
    }
    else
      $cache.css({
        'position': 'relative',
        'top': 'auto',
        'left': '10px'
      });
  }
  $('.modal-body').scroll(fixDiv);
  fixDiv();
});

编辑：这似乎是a bug。我的问题是如何解决这个问题？

Answer 1

好的，我找到了一个很好的解决方案。

检测浏览器使用的是 IE
将 css 替换为模式视图顶部的offset().top
将offset().left个{element}的getFixed替换为 css

这项工作适用于所有 IE 浏览器等。请试试。

我也做了一个小提琴：http://jsfiddle.net/0Lue2rsp/

＆＃13;

$('.launchConfirm').on('click', function (e) {
    $('#confirm').modal({
        show: true
    });
});

// variable for check if IE detected
var IfIE = false;  

//Check if IE used
var ua = window.navigator.userAgent; 
var msie = ua.indexOf("MSIE ");

if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) 
{
  IfIE = true;
}
else  
{
  IfIE = false;
}


jQuery(function($) {
  function fixDiv() {
    var $cache = $('#getFixed');
    if ($('.modal-body').scrollTop() > 50)
    {
    	if(IfIE == true){
     
     		$cache.css({
          'position': 'fixed',
          'top': $(".modal-content").offset().top,
          'left':$("#getFixed").offset().left,
          'width': '500px'
        });
      }else{
      	$cache.css({
          'position': 'fixed',
          'top': '0',
          'left':'25px',
          'width': '500px'
        });
      }
    }
    else
      $cache.css({
        'position': 'relative',
        'top': 'auto',
        'left': '10px'
      });
  }
  $('.modal-body').scroll(fixDiv);
  fixDiv();
});

＆＃13;

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' );
.modal-open .modal {
   //overflow: hidden;
 }
 .modal-body {
   height: calc(100vh);
   overflow-y: scroll;
 }
 
 #getFixed {
   position: relative;
   left: 10px;
   width: 500px;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


<div class="page-container">
    <div class="container">
        <br />
        <button type="button" class="btn launchConfirm">Open modal</button>
    </div>
</div>
<div class="modal fade" id="confirm">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body" id="confirm2">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="modal-title">Modal title</h4>
                 <div id="getFixed" style="background-color:red">This div should be fixed<br>in the modal, not outside it.</div>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                some random buttons
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

＆＃13;

IE 11中的转换+定位问题

1 个答案: