將CSS calc（）函數轉換爲jQuery以擴展瀏覽器支持

Question

我有以下代碼用於solve this problem我有。它工作在IE9/Chrome瀏覽器：

$(document).ready(function() { 
     var legendWidth = $('#titleInner').outerWidth(); 
     var margin = 'calc((100% - ' + legendWidth + 'px)/2)'; 
     $('#titleInner').css('margin-left', margin); 
     $('#titleInner').css('margin-right', margin); 
    }); 

不過，我想擺脫CSS calc() function，使其工作在IE7/8。

我看過this question/answer使用jQuery來做計算，這似乎是一個很好的解決方案。

問題是我無法獲得語法/鏈接工作。

這是我曾嘗試：

$(document).ready(function() { 
     var legendWidth = $('#titleInner').outerWidth(); 
     $('#titleInner').css('margin-left', '100%').css('margin-left', '-' + legendWidth + 'px').css('margin-left', '/2'); 
     $('#titleInner').css('margin-right', '100%').css('margin-right', '-' + legendWidth + 'px').css('margin-right', '/2'); 
    }); 

我已經嘗試了一些變化（去掉「PX」等），但沒有運氣。我也無法弄清楚如何在多個chain elements範圍內添加「/ 2」。

那麼，任何人都可以請幫助jQuery相當於var margin = 'calc((100% - ' + legendWidth + 'px)/2)';？

Answer 1

這可能會實現：

$(document).ready(function() { 
    var legendWidth = $('#titleInner').outerWidth(); 
    var legendParentWidth = $('#titleInner').parent().outerWidth(); 
    var margin = (legendParentWidth - legendWidth)/2; 
    $('#titleInner').css('margin-left', margin + 'px'); 
    $('#titleInner').css('margin-right', margin + 'px'); 
}); 

或者與鏈接：

$(document).ready(function() { 
    var legendWidth = $('#titleInner').outerWidth(); 
    $('#titleInner').css('margin-left', '100%').css('margin-left', function(){ 
     return (($('#titleInner').css('margin-left') - legendWidth)/2) + 'px'; 
    }); 
    $('#titleInner').css('margin-right', '100%').css('margin-right', function(){ 
     return (($('#titleInner').css('margin-right') - legendWidth)/2) + 'px'; 
    }); 
});