代码之家  ›  专栏  ›  技术社区  ›  Lyon

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

  •  5
  • Lyon  · 技术社区  · 16 年前

    我目前使用以下代码将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');
      });
    
    2 回复  |  直到 16 年前
        1
  •  3
  •   mkoryak    16 年前

    您是否尝试过使用outterWidth()而不是width()?

    您可以修改它并添加依赖于浏览器的偏移,例如:

    width += ($.support.boxModel ? 0 : 2);
    
        2
  •  1
  •   Christopher Tokar    16 年前

    这是使用CSS不可避免的一部分。当然,你可以在清晨的时候修改CSS,这样所有的浏览器都可以用相同的CSS呈现相同的内容,但是我们都有最后期限。我发现在浏览器之间调整元素维度的最简单解决方案是 conditional comments . 您还可以为不同的浏览器定义单独的样式表文件(仅包含差异),并相应地加载这些文件。