使用jQuery在精确宽度的输入字段下方显示div

前端之家收集整理的这篇文章主要介绍了使用jQuery在精确宽度的输入字段下方显示div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我目前使用以下代码将div直接放在焦点上的输入文本字段下方.问题是div的宽度因浏览器而异.有没有办法确保出现的div是我的输入字段的确切宽度?

  1. // get the field position
  2. var inputField = $('#inputfield');
  3. var fieldDiv = $('div.divname');
  4. var sf_pos = field.offset();
  5. var sf_top = sf_pos.top;
  6. var sf_left = sf_pos.left;
  7. // get the input field size
  8. var sf_height = inputField.height();
  9. var sf_width = inputField.width();
  10. fieldDiv.css("position","absolute");
  11. fieldDiv.css("left",sf_left);
  12. fieldDiv.css("top",sf_top + sf_height + 6);
  13. fieldDiv.css("width",sf_width);
  14. $('#inputfield').focus(function() {
  15. fieldDiv.fadeIn('medium');
  16. }).blur(function() {
  17. fieldDiv.fadeOut('medium');
  18. });
最佳答案
我认为这可能与IE不尊重盒子模型有关,有些浏览器也会包​​含宽度的边框,而其他浏览器也不会.

你尝试过使用outterWidth()而不是width()吗?


您可以破解它并添加与浏览器相关的偏移量,例如:

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

猜你在找的jQuery相关文章