Imagen de fondo que no aparece en la etiqueta span

Tengo problemas con una etiqueta span que muestra una imagen de fondo en la última versión de FF en Windows 7. Parece funcionar y mostrar todo bien en versiones anteriores de FF, Chrome, Safari e IE pero de mano dispositivos y Windows 7 parece fallar.Imagen de fondo que no aparece en la etiqueta span

Disculpe si esto parece vago, simplemente no puedo entenderlo, las imágenes eran originalmente pngs sin altura especificada, y desde entonces las hice gifs y apliqué una altura.

<span class="design">Design Viz</span> 
<style> 
.design { 
    background:url(_includes/images/agenda-design.gif) no-repeat top left; 
    display: inline-block; 
    height: 17px; 
    padding-left:25px; 
} 
</style>

Fuente

2011-09-28 Liam

Sólo una conjetura rápido, pero que realmente necesita tener su dirección URL en '' (lo que es url (' _includes/images/agenda-design.gif ') – MTilsted

Sí, lo eliminé antes de publicarlo aquí como cliente. – Liam

La propiedad CSS Imagen de fondo sólo se pone una imagen como el fondo. El ancho y alto de un objeto siempre se define mediante ajustes estáticos a través de CSS/estilo en línea o por el tamaño real del contenido que se muestra en él. En su caso, dado que no ha agregado ningún contenido entre sus etiquetas, sus dimensiones x/y serán 0, pero no hay errores con el fondo. Está allí, solo que no puedes verlo a menos que definas (de alguna manera) un tamaño para el elemento.

<span class="design">Design Viz</span> 
.design { 
padding-left:25px; 
background:url(_includes/images/agenda-design.gif) no-repeat top left; 
display: inline-block; 
height: 17px; 
width: 50px; 
}

Donde 50 puede ser un valor útil adecuado para su caso.

Fuente

2011-09-28 11:11:08

Tengo el contenido entre mis etiquetas pensado, 'Design Viz'? – Liam

La altura y la pantalla de Span eran factores clave con los que estaba luchando. – Pupil

-1

Agregar Ancho: 17px a su estilo CSS también (o lo que sea la anchura es)

Fuente

2011-09-28 11:04:00 Christian

Pero la clase se aplica a varias palabras, todas de diferente longitud, por lo que no puedo establecer un ancho específico. .. – Liam

puede agregar min-width: – Christian

He intentado agregar min-widht: 17px y ancho: automático sin suerte – Liam

display: inline-block; no es compatible con IE7. Se puede arreglar añadiendo:

.design { 
    padding-left:25px; 
    background:url(_includes/images/agenda-design.gif) no-repeat top left; 
    display: inline-block; 
    height: 17px; 
    width: 50px; 
    zoom: 1; 
    *display:inline; 
}

Fuente

2011-09-28 11:18:38 GDW

No se puede establecer atributos no-repeat top left si se declara Imagen de fondo. En background-image, solo debe establecer el enlace a su imagen.

O usted podría utilizar background así:

background: url(...) no-repeat top left

Fuente

2017-01-29 18:06:45

uso de relleno como

padding-left:25px; 
    padding-top: 6px; 
    padding-bottom: 10px; 
    padding-right: 5px;

Fuente

2017-12-26 10:44:02

Imagen de fondo que no aparece en la etiqueta span

Respuesta

Cuestiones relacionadas