•  21-09-2019
  •  | 
  •  

题

我试图对齐表格的输入，使得表中创建一个谷歌状下拉。我使用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>
有帮助吗？

解决方案 3

感谢为您的答案。

事实上，我发现了主要问题是border-collapse: collapse属性。当设置与collapse标记<!DOCTYPE...>随后包括绝对工作台定位和宽度设置给出的结果我并没有指望（但实际上所需的行为具体根据W3C标准）。为了精确地对准的目的，证明更好设置border-collapse: separate。

其他提示

很可能是由于绝对定位：

position: absolute;

尝试移除或将其更改为相对于和设置空间。

绝对定位是做一个棘手的事情，而且往往必须被修改为IE VS其他浏览器。

使用下面的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部分。

希望这有助于一些。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top