带doctype的HTML表

我在尝试将表与输入对齐，以便表创建一个类似google的下拉列表。我使用jQuery来检索输入元素的位置和尺寸，然后使用CSS来定位表格。当我不使用DOCTYPE时，事情会非常顺利。带doctype的HTML表

现在，当任何 DOCTYPE包含在页面中的东西出错了（奇怪的不是IE）。表格突然变宽1px，向上移动1px。

请别人帮忙！也许你们中有些人有一段代码能够正确对齐。

<!--<!DOCTYPE html>--> 
<html> 

    <script src="js/jquery/jquery.js"></script> 

    <body> 

     <input type="text" id="input" />   
     <table id="dropdown" style="border: solid 1px black; border-collapse: collapse; position: absolute;"> 
      <tr> 
       <td>Text</td> 
      </tr> 
     </table> 

     <script> 

     var input = $("#input"); 
     var dropdown = $("#dropdown"); 

     dropdown.css("top", input.position().top + input.outerHeight() - 1); 
     dropdown.css("left", input.position()); 
     dropdown.css("width", input.outerWidth()); 

     </script> 

    </body> 

</html>

来源

2009-11-20 David

谢谢你的答案。

我其实发现主要问题是border-collapse: collapse属性。当设置为collapse且包含<!DOCTYPE...>标签时，绝对表格定位和宽度设置给出了我没有预料到的结果（但实际上按照W3C标准的期望行为）。为了精确对齐，最好设置border-collapse: separate。

来源

2009-11-20 12:21:09 David

很可能是由于绝对定位：

position: absolute;

尝试移除或将其更改为相对的，设置页边距。

绝对定位是一件棘手的事情，通常它必须在IE和其他浏览器之间进行修改。

来源

2009-11-20 02:49:04

使用下面的HTML和jQuery我能够使表看起来和IE8都和Chrome 2

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test Page</title> 
    </head> 
<body> 
    <input type="text" id="input" /> 
    <table id="dropdown" style="border: solid 1px black; 
      border-collapse: collapse; position: absolute;"> 
     <tr> 
      <td> 
       Text 
      </td> 
     </tr> 
     </table> 

    <script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> 
    </script> 

    <script type="text/javascript"> 
     $(document).ready(function({ 
      var input = $("#input"); 
      var dropdown = $("#dropdown"); 
      dropdown.css("top", input.position().top + input.outerHeight() - 1); 
      dropdown.css("left", input.position()); 
      dropdown.css("width", input.outerWidth()); 
     }); 
     </script> 

</body> 
</html>

我注意到，你失踪了HTML的头部，在相同的位置脚本标记的语言类型，并且您的JavaScript没有document.ready部分。

希望这有助于一些。

来源

2009-11-20 03:00:47 Chris

带doctype的HTML表

回答

相关问题