Afficher un div sous un champ de saisie de la largeur exacte à l'aide de jQuery

Question

Actuellement, j'utilise le code suivant pour positionner un div directement sous un champ de texte de saisie lors du focus. Le problème est la largeur de la div varie entre les navigateurs. Y at-il un moyen de s'assurer que la div qui apparaît est la largeur exacte de mon champ de saisie?

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

Je pense que cela peut être lié à IE ne respectant pas le modèle de boîte, et certains navigateurs comprendra également des frontières dans les largeurs et les autres ne vais pas.

Avez-vous essayé d'utiliser outterWidth() au lieu de width()?

aussi Vous pouvez pirater et ajouter des décalages qui dépendent navigateur, par exemple:

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

Answer 2

Ceci est une partie inévitable de l'utilisation de CSS. Bien sûr, vous pouvez bidouiller votre CSS jusqu'au petit matin pour que tout soit rendu identique dans tous les navigateurs avec le même CSS, mais nous avons tous des délais. J'ai trouvé la solution la plus simple pour ajuster les dimensions des éléments entre les navigateurs: conditional comments. Vous pouvez également définir des fichiers de feuilles de style distincts pour différents navigateurs (qui contiennent uniquement les différences) et les charger en conséquence.