tabla HTML con el tipo de documento

StackOverflow https://stackoverflow.com/questions/1767977

  •  21-09-2019
  •  | 
  •  

Pregunta

Estoy tratando de alinear una tabla con una entrada para que la tabla crea un menú desplegable similar a Google. Estoy usando jQuery para recuperar la posición y las dimensiones del elemento de entrada y luego CSS para posicionar la mesa. Las cosas funcionan bastante suave cuando no uso DOCTYPE.

Ahora, cuando CUALQUIER DOCTYPE está incluido en la página las cosas van mal (extrañamente no en IE). Tabla 1 píxel es de repente más amplia y se mueve hacia arriba ya la izquierda por 1 píxel.

Por favor, alguien que le ayude! Tal vez algunos de ustedes tienen un pedazo de código que hace la alineación correcta. 

<!--<!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>
¿Fue útil?

Solución 3

Gracias tanto para sus respuestas.

De hecho, encontré el problema principal era la propiedad border-collapse: collapse. Cuando se establece en collapse con la etiqueta <!DOCTYPE...> incluido entonces posicionamiento absoluto mesa y ajuste de ancho dio resultados que no esperaba (pero en el comportamiento hecho deseada según el estándar W3C). A los efectos de la alineación exacta resulta mejor para establecer el border-collapse: separate.

Otros consejos

Es probable debido a la colocación absoluta: 

position: absolute;

Prueba a eliminar eso o cambiarlo a los márgenes relativos y ajuste.

El posicionamiento absoluto es una cosa difícil de hacer, ya menudo tiene que ser modificado para IE vs otros navegadores.

Usando el siguiente código HTML y jQuery que era capaz de hacer aparecer la tabla y la posición de los mismos tanto en IE8 y 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>

Me di cuenta de que estaban perdiendo la sección de cabecera del HTML, el tipo de idioma de las etiquetas script y que su Javascript no tenía la sección document.ready.

Espero que esto ayude un poco.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top