•  21-09-2019
  •  | 
  •  

문제

I am trying to align a table with an input so that the table creates a google-like drop-down. I am using jQuery to retrieve the position and dimensions of the input element and then CSS to position the table. Things work pretty smooth when I don't use DOCTYPE.

Now, when ANY DOCTYPE is included on the page things go wrong (weirdly not in IE). Table is suddenly 1px wider and moves up and left by 1px.

Please someone help! Perhaps some of you have a piece of code that does the correct alignment.

<!--<!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

Thanks for both your answers.

I actually found out the main problem was the border-collapse: collapse property. When set to collapse with <!DOCTYPE...> tag included then absolute table positioning and width setting gave results I wasn't expecting (but in fact desired behaviour as per the W3C standard). For the purpose of accurate alignment it proves better to set the border-collapse: separate.

다른 팁

It's likely due to absolute positioning: 

position: absolute;

Try removing that or changing it to relative and setting margins.

Absolute positioning is a tricky thing to do, and often it has to be modified for IE vs other browsers.

Using the following HTML and jQuery I was able to make the table appear and position the same in both IE8 and 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>

I noticed that you were missing the head section of the HTML, the language type of the script tags and that your javascript did not have the document.ready section.

Hope this helps some.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top