Qué haría que un elemento <p> no abarcara todo el ancho en el navegador de Android
Me han pedido que eche un vistazo a un extraño problema y no puedo entenderlo. Básicamente
Los elementos típicamente abarcan toda la anchura, ya que son elementos de bloque, pero en ciertas páginas no parecen querer hacerlo. He probado esto en el ICS por defecto de Android y Dolphin y está jugando en ambos. Esta pregunta resume el problema, sólo la respuesta no funciona: ¿Por qué el navegador de Android no abarca este párrafo en toda la anchura del navegador?
- Buscando una alternativa para iScroll (Scrolling Div's en iOS / Webkit)
- Android inseguro: tel: con la aplicación phonegap
- Android Html.fromHtml función automática convierte texto no deseado en hipervínculos
- Android: ¿Cómo puedo añadir enlaces HTML dentro de un ListView?
- ¿Cómo puedo diseñar una etiqueta HTML INPUT para que mantenga CSS cuando se centre en Android 2.2+?
ACTUALIZACIÓN: ¿Una solución extraña? Si configuro el siguiente CSS p {background: #fff; } Resuelve el problema, lo que podría causar algunos un extraño problema. El problema es que necesito que los antecedentes sean transparentes.
- Contactar con Bubble EditText
- Cómo cargar o recuperar una página web en modo en línea y fuera de línea en la aplicación android?
- ¿Cómo enviar datos multipart / form a un servidor web desde android?
- Tipo de teclado suave en una página HTML personalizada
- Recursos HTML de Android con referencias a otros recursos
- Cómo deshabilitar el desplazamiento vertical de la vista web para cargar la página entera como columna diferente
- Android: html en textview con el enlace clickable
- Desactivar el zoom en el enfoque de entrada en la página web de Android
Es un hack, pero mi solución fue establecer fondo: url (''); En mis etiquetas de párrafo y título. Necesito que mi fondo sea transparente, así que no puedo establecer un color.
Curiosamente configuración fondo: rgba (0,0,0,0); No funciona por alguna razón?
Si desea estar seguro y, de hecho, suministrar una URL de imagen válida puede utilizar:
Fondo: url (datos: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII =);
Este es un fondo base64 100% transparente de un solo píxel.
Voy a notar que esta situación sólo comenzó a ocurrir para mí cuando establecí mi visor de 640 para que el sitio móvil sería escala muy bien para cualquier navegador móvil.
Esto parece ser un error con la escala de vista que no funciona correctamente de lo que puedo decir.
Este es un viaje bien.
He configurado mi Android para no ajustar automáticamente las páginas, solucionado el problema.
A continuación, estableció mi teléfono a las páginas de ajuste automático, agregó a mi <p>
en mi background: black;
css background: black;
Y es fijo.
Otra cosa extraña es que en mi hoja de estilos, si configuro p{ text-align: center}
, el <p>
extiende completamente como espero, con el teléfono configurado para ajustar automáticamente las páginas y sin configuración de fondo. También hice text-align: right
, funciona como se esperaba. Entonces cambié el text-align: left
, ahora se rompe otra vez. Muy, muy extraño problema aquí …
Esto también es cierto para la etiqueta <li>
. El mismo problema. Arreglé ambos problemas añadiendo p, li {background: url('');}
a mi hoja de estilo css.
En lugar de usar <p>
, <div>
u otras etiquetas dentro de <td>
, simplemente puede usar <span>
y hará el truco. Parece que a partir de Android 4, el navegador de Internet por defecto tiene algunos problemas de interpretación. He probado antes en android 2 y funciona muy bien sin ningún "ajuste".
Sobre la base de esta pregunta y su pregunta anterior, no parece haber ninguna razón obvia por la que no debería funcionar. Sin embargo, algo que sucedió de regreso en el día fue que si no declarar (en algunos navegadores sin nombre) atributos específicos, las propiedades no inherit
como se suponía.
Debido a que no hay ninguna razón por la que el <p>
debe renderizar de esa manera, Y el anterior solía ser un problema conocido, yo recomendaría establecer el width
del <body>
a 100%
ya que puede ser un caso de herencia perdida.
EDIT: Alternativa
Otra solución popular al problema mencionado anteriormente era envolver los elementos ofensivos en un container
<div>
de clase que tenía el width
especificado. Ambas son típicamente soluciones viables que mejoran significativamente la consistencia cruzada entre los navegadores.
Espero que esto ayude, FuzzicalLogic
Tengo el mismo problema en 2 sitios diferentes. Tuve que trabajar alrededor de esto mediante la creación de una imagen de fondo png transparente.
En mi caso, los elementos p tenían exactamente el ancho del ancho de la pantalla del dispositivo, por lo que girar el dispositivo cambió el ancho de los elementos p.
Incluso establecer un ancho fijo con! Importante en la p fue ignorado!
Esto puede no ser la respuesta que necesita, pero encontré que funciona si usted da es una display:inline;
CSS display:inline;
Propiedad en lugar de la display:block;
Por defecto, no extenderá toda la pantalla por más tiempo. No estoy completamente seguro de si esto funciona en Android (no tengo uno), pero tuve un problema similar en mi computadora portátil y esto lo arregló.
He encontrado una solución a este problema que realmente funciona! Esto es en realidad un ajuste en el navegador de Android "Auto-Ajustar Páginas". Apagar eso resolverá este problema con certeza.
Micro
- ¿Por qué estoy recibiendo el error "MyActivity no es una clase inclusiva?"
- ActionBarSherlock Cambio de color del botón de retroceso?