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或其他）而不是「auto」在mainrow上設置了一個特定的margin-left，它可以在加載時工作。但吸引力是從網格中獲取居中行的左邊距（所以「margin：0 auto」）。

Answer 1

一些研究，我發現，這是一個Firefox的錯誤不是從「自動」元素訪問是得到保證金後css通過.css（）。所以我用.offset（）。left來訪問它，它現在可以工作。

所以它現在看起來是這樣的：

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

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

Answer 2

我想這可能是因爲你的noConflict，因爲我遇到了啓用noConflict的函數問題。

運行沒有noConflict OK，請參見下面的例子：

$(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>