Question

我正在尝试将表格与输入对齐，以便表格创建类似谷歌的下拉列表。我使用jQuery来检索输入元素的位置和尺寸，然后使用CSS来定位表。当我不使用DOCTYPE时，事情很顺利。

现在，当页面中包含 ANY 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>

Answer 1

这可能是由于绝对定位：

position: absolute;

尝试删除它或将其更改为相对和设置边距。

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

Answer 2

使用以下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的head部分，脚本标签的语言类型以及你的javascript没有document.ready部分。

希望这会有所帮助。

Answer 3

感谢您的回答。

我实际上发现主要问题是border-collapse: collapse属性。当设置为包含collapse标记的<!DOCTYPE...>时，绝对表格定位和宽度设置给出了我没想到的结果（但实际上是符合W3C标准的所需行为）。出于精确对齐的目的，最好设置border-collapse: separate。

带有doctype的HTML表格

3 个答案: