Question

我目前使用以下代码将div直接放在焦点上的输入文本字段下方。问题是div的宽度因浏览器而异。有没有办法确保出现的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');
  });

Answer 1

我认为这可能与IE不尊重盒子模型有关，有些浏览器也会包含宽度的边框，而其他浏览器也不会。

您是否尝试过使用outterWidth（）而不是width（）？

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

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

Answer 2

这是使用CSS的必然部分。当然，你可以破解你的CSS，直到凌晨时分，所有浏览器中的所有内容都使用相同的CSS呈现相同，但我们都有截止日期。我发现在浏览器之间调整元素维度的最简单的解决方案是conditional comments。您还可以为不同的浏览器（仅包含差异）定义单独的样式表文件，并相应地加载它们。

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

2 个答案: