jQuery加载DIV宽度在Firefox中不起作用

Question

I have a website that uses a JavaScript/jQuery script to get the width of a div based on the screen size.

When I pull the website up in Firefox the div does not appear because the width is being set to 0px. The div appears fine in Chrome and IE, so I checked to make sure JavaScript was enabled in Firefox and it is.

Any ideas on a solution?

The script I'm using is:

$(document).ready(function () {
  var w = $('#content').css("margin-left");
  $('#wrapper').css("width", w);
});

If you open this JSfiddle in Firefox and inspect the sidebar wrapper div, you'll see the width is being set to 0, where in Chrome it has a value.

Answer 1

Seems like everything is working on jsFiddle.

http://jsfiddle.net/wnxLr9bo/

<div id="wrapper">width of: </div>
<div id="content">the margin of: </div>

    $().ready(function() {
      var w = $('#content').css("margin-left");
      $('#content').append($('#content').css("margin-left"));
      $('#wrapper').css("width", w);
      $('#wrapper').append(w);
    });

#content {
    margin-left: 100px;
}

#wrapper {
    width: 0px;
}

Answer 2

So here's what I found on another thread...I guess Firefox isn't going to let it happen.

Unfortunately, this comes down to browser differences. To quote an answer to a similar problem :

As to why Chrome and IE return different values: .css() provides a unified gateway to the browsers' computed style functions, but it doesn't unify the way the browsers actually compute the style. It's not uncommon for browsers to decide such edge cases differently.

So you're kinda screwed. You have a few options to make this consistent.

You can reliably return auto by hiding the element before you compute the style. Something like this might work:

var $bar = $('.bar');
$bar.hide();
var barMarginRight = $('.bar').margin().right; // "auto"
// do whatever you need to do with this value
$bar.show();

You can also use jQuery's $('.bar').offset() , which returns properties you might be able to use.

// This might not be exactly what you want, but...
$('.spec').css('margin-left', $('.bar').offset().left + 'px');

You can also try to fix the problem with CSS, though we'd need to see your whole page to decide about that.

Answer 3

The reason for your problem is a strange behaviour of Firefox and Safari , thats clearly against the W3C specification of getComputedStyle() and should be reported as a bug.

You have set the margin of your #content to: 0px auto . Thats a common way to center a blocklevel element with given width in its containing block. Browsers take the width of the parent, subtract the width of the the element and divide by two. The resulting value is is used for marginLeft and marginRight and should be returned as computedValue for both properties. After calculation the element gets rendered (correctly centered). But Firefox and Safari see the keyword auto and set computedStyle to 0px (the default value for auto) before doing calculation and rendering.

Don't believe you can always rely on the values other browsers return. At that moment the parent or grandparent itself have some margin or padding or the boxSizing property is changed somewhere, they get confused and return wrong values even when the rendering is correct.

If you try to detect such cases by looking for the (shorthand) property margin , you'll fail again: Firefox, InternetExplorer and Safari answere with silence (empty string). Chrome and Opera return the margin shorthand, but the values there are often different from what you get with marginLeft and marginRight.

A workaround for marginLeft uses the difference between the left offset of the element and its parent (or its offset-parent, when element has position: 'absolute'). Refering to your code it looks like:

$(document).ready(function () {
    var con = $("#content"), cpos = con.css('position'), par, w;
    if (cpos === 'static' || cpos === 'relative') par = con.parent();
    else par = con.offsetParent();
    w = con.offset().left - par.offset().left;
    $("#wrapper").css('width', w);
});

I can not guarantee that it works in all usecases, but I havn't found problems until now. Working JSFiddle here . Now even Firefox and safari gets a width for the sidebar. Second JSFiddle . Here you can toggle between using marginLeft and offsetLeft for a quick browser test.

Since there is no offset right, the workaround for marginRight needs some more calculations.If you need it, post a comment and I will extend my answer.