使用jQuery在精確寬度的輸入字段下面顯示一個div

我當前使用下面的代碼將div直接放在焦點上的輸入文本字段下面。問題在於div的寬度因瀏覽器而異。有沒有辦法確保出現的div與我的輸入字段的確切寬度？使用jQuery在精確寬度的輸入字段下面顯示一個div

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

來源

2010-03-03 Lyon

也許由埃裏克邁耶的css重置可以幫助你：http://meyerweb.com/eric/tools/css/reset/ - 有了這個，你應該能夠在幾乎每個瀏覽器中達到相同的寬度 – xijo 2010-03-03 14:39:30

謝謝！我使用yui3重置和基礎樣式。由於YUI不會重置所有html格式，而是將其歸一化，所以我更喜歡Eric Meyer。 – Lyon 2010-03-03 14:50:37

我認爲這可能與IE不尊重盒子模型有關，有些瀏覽器也會在寬度和其他寬度中包含邊框。

你試過用outterWidth（）而不是width（）嗎？

也你能砍它，並添加與瀏覽器相關的偏移，例如：

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

來源

2010-03-03 14:38:56 mkoryak

你是個天才！我將width（）更改爲outerWidth（）並減去2個像素，並且它變成了相同的寬度:)謝謝！ – Lyon 2010-03-03 14:40:23

這是使用CSS中不可避免的一部分。當然，你可以在早晨清理你的CSS，這樣所有瀏覽器中的所有內容都具有相同的CSS，但我們都有截止日期。我發現調整瀏覽器之間元素尺寸的最簡單的解決方案是conditional comments。您還可以爲不同的瀏覽器（僅包含差異）定義單獨的樣式表文件並相應地加載它們。

來源

2010-03-03 14:42:09

謝謝:)我使用有條件的IE評論那些討厭的顯示怪癖。 – Lyon 2010-03-03 14:49:26

使用jQuery在精確寬度的輸入字段下面顯示一個div

回答

相關問題