Mostrar un div debajo de un campo de entrada del ancho exacto usando jQuery

Question

Actualmente utilizo el siguiente código para colocar un div directamente debajo de un campo de entrada de texto en el foco. El problema es que el ancho del div varía entre los navegadores. ¿Hay alguna forma de garantizar que el div que aparece sea el ancho exacto como mi campo de entrada?

// 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

Creo que esto puede estar relacionado con IE no respetar el modelo de caja, y algunos navegadores también incluirá las fronteras en los anchos y otros costumbre.

intenté usar outterWidth() en lugar de width()?

también Puede entrar ilegalmente en él y añadir las compensaciones que dependen del navegador, por ejemplo:

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

Answer 2

Esta es una parte inevitable del uso de CSS. Claro, puedes hackear tu CSS hasta la madrugada para que todo sea igual en todos los navegadores con el mismo CSS, pero todos tenemos fechas límite. He encontrado que la solución más simple para ajustar las dimensiones de los elementos entre los navegadores es conditional comments. También puede definir archivos de hojas de estilos separados para diferentes navegadores (que contienen solo las diferencias) y cargarlos en consecuencia.