javascript - jQuery 代码不适用于 Firefox

Question

所以我得到一行的左边距并将其添加到另一行。它在 Safari 和 Chrome 上运行良好。它也不会抛出任何错误。

这是 jQuery 代码:

var j = jQuery.noConflict();
j(document).ready(function($){

  // Slider margin left equal to grid on load
  var margLeft = $('#mainrow').css('margin-left');
  $('#cnn-slider').css('margin-left', margLeft);

  // Slider margin left equal to grid on resize window
  $(window).resize(function() {
    var margLeft = $('#mainrow').css('margin-left');
    $('#cnn-slider').css('margin-left', margLeft);
  });

});

HTML 代码:

<div id="main" role="main">
    <article>
        <div class="entry-content">
            <div class="row" id="mainrow">
                <div class="medium-12 columns">
                    <h1><?php the_title(); ?></h1>
                    <div class="row main-content">
                        <div class="medium-6 columns">
                            <?php the_field('history_text'); ?>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" id="cnn-slider" style="max-width: 100%;">
                <div class="columns">
                    <div class="slider-container">
                    <div class="slider-shadow"></div>
                        <?php echo do_shortcode("[metaslider id=40]");?>
                    </div>

                </div>
            </div>
            <?php the_content(); ?>
        </div><!-- .entry-content -->
    </article>
</div>

编辑:我已经添加了 HTML 代码，因为一些用户说它不完整。整个事情就这样应该就够了。谢谢。

编辑 2: 如果我通过 css(如 100px 或其他)在 mainrow 上设置特定的 margin-left 而不是“auto”，它会在加载时工作。但吸引人的是从网格中动态获取居中行的左边距(因此“边距:0 自动”)。

Answer 1

我想这可能是因为您的 noConflict，因为我在启用 noConflict 的情况下遇到了函数问题。

运行正常，没有冲突，请看下面的例子:

$(function() {
  $(window).on( 'resize', resetMargin );
  
  resetMargin();
});

function resetMargin() {
  var margLeft = parseInt( $('#mainrow').css('margin-left') );
  $('#cnn-slider').css('margin-left', margLeft);
  console.log( margLeft );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main" role="main">
    <article>
        <div class="entry-content">
            <div class="row" id="mainrow">
                <div class="medium-12 columns">
                    <h1>test</h1>
                    <div class="row main-content">
                        <div class="medium-6 columns">
                            blahblahblah
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" id="cnn-slider" style="max-width: 100%;">
                <div class="columns">
                    <div class="slider-container">
                    <div class="slider-shadow"></div>
                        woohawoohawooha
                    </div>

                </div>
            </div>
            <?php the_content(); ?>
        </div><!-- .entry-content -->
    </article>
</div>