Установка поля справа в jQuery не работает в IE11 - PullRequest
1 голос
/ 31 января 2020

codepen : [https://codepen.io/thrilom/pen/BaygPpr][1]

Мой код работает во всех браузерах, которые я тестировал, кроме IE11. Я еще не получил в Edge, но я предполагаю, что это будет та же проблема. Я установил

<meta http-equiv="X-UA-Compatible" content="IE=edge">

. jQuery просто берет margin-right контейнера и дает другому элементу отрицательное поле, чтобы высосать его в крайний правый угол области просмотра. ПОМОГИТЕ!

(function($) {
  $(window).on("load resize", function() {
    var adjustMargin = $(".two-col-image__container").css('marginRight');
    $(".two-col-image__marginChange").css('marginRight', '-' + adjustMargin);
  });
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="container-fluid two-col-image" style="background: url(assets/images/about-bg@2x.png) no-repeat center center;
		background-size: cover;">
    <div class="row">
      <div class="container two-col-image__container">
        <div class="row">
          <div class="col-12 col-md-6 ml-auto d-flex align-items-center mt-4 mt-md-0 two-col-image__group">
            <div class="two-col-image__group-container">
              <h2 class="h6 two-col-image__title">HELLO WORLD</h2>
              <h3 class="h2 two-col-image__sub-title">ABOUT</h3>
              <p>More text</p>

              <p><a href="#">Scooter</p>
									<a href="javascript:void(0);" class="btn btn-default"><span>learn more</span><img class="img-fluid btn-default__img"
											alt="Link Icon" src="assets/images/btn-icon.svg" /></a>
            </div>
          </div>
          <div class="col-12 col-md-6 two-col-image__image-group">
            <div class="two-col-image__marginChange">
              <img class="two-col-image__image" alt="About Cotton" class="img-fluid" src="assets/images/about-image-card@2x.png" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

1 Ответ

0 голосов
/ 10 февраля 2020

Я решил это, удалив все jQuery и добавив css, чтобы сделать это. Кажется, это лучший вариант для поддержки всех браузеров: width: calc(50vw - #{$grid-gutter-width/2});

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...