Twitter se forman campos de arranque demasiado pequeñas

Question

Sé que este tema "suena" mucho a otros que están ahí fuera, pero he mirado a través de todos los hilos existentes (así "la mayoría" de todos modos) y todavía tengo un problema que podría utilizar ayuda sobre ...

el problema no es demasiado diferente a lo que otros han descrito:

• Ciertos elementos FORM no muestran su altura vertical completa
• lo más notable entre éstos es el tipo de entrada se ve algo anémico de tamaño cuando está sentado al lado de un botón o "Complemento" clase
• Más recientemente he notado un problema aún más grave ... botones de radio se convierten en "puntos" de radio, ya que son tan pequeñas que están apenas visible.

ahora una gran cantidad de personas que resuelven su problema, asegurándose de que especifican la DOCTYPE correctamente en la parte superior de su documento HTML. También descubrí que este simple ajuste hizo el truco en mi maqueta de HTML estático. Lamentablemente, cuando cambié a WordPress el problema reapareció y, sin embargo, definitivamente estoy poniendo la firma HTML 5 DOCTYPE en la parte superior de la salida (he comprobado esto varias veces con "ver fuente" ya que pensé que tal vez había perdido mi mente).

He incluido un panorama general de la pantalla en caso de que esto ayuda a arrojar alguna luz sobre esto. Puede encontrarlo aquí: http://www.flickr.com/photos/14261777@N00/6957941282/. Tenga en cuenta los pequeños puntos pequeños en la parte inferior que se supone que son botones de radio. Más obvio son los campos INPUT que no son lo suficientemente altos. Ah, y también para completar, aquí hay una captura de pantalla de cómo comienza mi fuente HTML: http://www.flickr.com/photos/14261777@N00/6957952802/.

me gustaría saber de alguien que tiene una teoría sobre por qué esto podría estar ocurriendo y las soluciones alternativas que pudieran existir (incluso si la fuente de la solución es desconocida). Intenté imponer atributos de CSS como altura de línea, altura, altura mínima, etc. y algunos otros con cero efecto.

Answer 1

Parece que tiene dos problemas. El problema input type=text y el botón radio. Sin ver el código, parece que el problema de su cuadro de texto está relacionado con DOCTYPE y que su problema con el botón de opción está relacionado con la anulación de estilos CSS (puede confirmar si publica la salida del inspector para los botones de opción).

Si sus variables se muestran como los valores correctos (por ejemplo, altura de 18px), que son, entonces definitivamente es un problema DOCTYPE.

De this article en A List Apart:

Usted ha hecho todas las cosas bien, pero su sitio no se ve o trabajo como que le corresponde en los navegadores más recientes.

Has escrito XHTML y CSS válidos. Ha utilizado el estándar de W3C Modelo de Objetos de Documento (DOM) para manipular elementos de página dinámicos. Sin embargo, en navegadores diseñados para admitir estos estándares, su sitio está fallando . Un culpable DOCTYPE es probable que culpe.

Este pequeño artículo le proporcionará los DOCTYPE que funcionan, y explicará el efecto práctico, del mundo real de estas etiquetas aparentemente abstractas.

Aquí está la lista recomendada de los DOCTYPE según W3C:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Answer 2

Si alguien está interesado, aquí es lo que he añadido para solucionar el problema:

input, input[type="text"], input[type="radio"], isindex, .uneditable-input { 
    padding: 4px; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    border-bottom-color: #CCC; 
    border-left-width: 1px; 
    border-left-style: solid; 
    border-left-color: #CCC; 
    border-right-width: 1px; 
    border-right-style: solid; 
    border-right-color: #CCC; 
    border-top-width: 1px; 
    border-top-style: solid; 
    border-top-color: #CCC; 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px; 
    border-bottom-left-radius: 3px; 
    border-bottom-right-radius: 3px; 
} 

.input-append .add-on, .input-append .btn { 
    margin-left: -6px; 
} 

input[type=checkbox] { 
     -webkit-appearance: checkbox; 
}