将 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”。

那么，任何人都可以帮助使用相当于 var margin = 'calc((100% - ' + legendWidth + 'px) / 2)'; 的 jQuery 吗？

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';
    });
});