Display the div below the exact width input field using jQuery

Question

I am currently using the following code to place a div directly below the input text box in focus. The problem is that the width of the div varies between browsers. Is there a way to provide a div display that is exact width like my input box?

  // get the field position
  var inputField = $('#inputfield');
  var fieldDiv = $('div.divname');
  var sf_pos    = field.offset();
  var sf_top    = sf_pos.top;
  var sf_left   = sf_pos.left;
  // get the input field size
  var sf_height = inputField.height();
  var sf_width  = inputField.width();

  fieldDiv.css("position","absolute");
  fieldDiv.css("left", sf_left);
  fieldDiv.css("top", sf_top + sf_height + 6);
  fieldDiv.css("width", sf_width);

  $('#inputfield').focus(function() {
    fieldDiv.fadeIn('medium');
  }).blur(function() {
    fieldDiv.fadeOut('medium');
  });

Answer 1

I think this may be due to non-box IE, and some browsers will also include borders in width and others.

Have you tried using outterWidth () instead of width ()?

and you can crack it and add browser-specific offsets, for example:

width += ($.support.boxModel ? 0 : 2);

Answer 2

CSS. , CSS , CSS, . . ( ) .