Linea orizzontale utilizzando HTML/CSS

Question

Sto cercando di ottenere una linea orizzontale per funzionare nel mio blog, ma ho problemi a visualizzare la riga in google chrome (IE e Firefox lo visualizzano perfettamente).

In sostanza, nel mio CSS, ho il seguente:

div.hr { 
background: #fff no-repeat scroll center; 
margin-left: 15em; 
margin-right: 15em; 
width:50em; 
height:.05em; 
} 

div.hr hr { 
display: none; 
} 

Nel mio HTML, ho qualcosa di simile:

<div class="hr"><hr /></div> 

Per qualche ragione, in Google Chrome, la linea è solo non là. Il problema ora è, ho un sacco di questi (circa 25):

---

e, quindi, sto cercando di modificare solo la mia CSS, in modo che io possa fare modifiche minime al mio HTML.

Su google, vedo che molti hanno avuto questo problema, ma non sembra esserci una soluzione adeguata (non considerando "disegnare" una linea e inserire la linea come una foto!).

sarei grato se qualcuno mi potrebbe punto nella giusta direzione per risolvere il problema di cui sopra.

Molte grazie.

Answer 1

Questo potrebbe essere il vostro problema:

height: .05em; 

Chrome è un po 'funky con i decimali, in modo da provare un'altezza pixel fisso:

height: 2px; 

Answer 2

O cambiare a height: 0.1em; orso, la dimensione minima di tutto ciò che è visualizzabile è 1px.

Il 0,05 em si utilizza mezzi, ottenere la dimensione del carattere corrente in pixel di questi elementi e datemi 5% di esso. Quale per 12 pixel restituisce 0,6 pixel che è troppo piccolo per essere visualizzato. se si aumentasse la dimensione del carattere del div a almeno 20pixel sarebbe visualizzato bene. Suppongo che Chrome non arrotonda le dimensioni per essere almeno 1 pixel dove altri browser fanno.

Answer 3

ho provare questo il mio nuovo codice e potrebbe essere utile a voi, funziona perfettamente in google chromr

hr { 
    color: #f00; 
    background: #f00; 
    width: 75%; 
    height: 5px; 
} 

Answer 4

si potrebbe anche fare in questo modo, nel mio caso lo uso prima e dopo un h1 (forza bruta è ehehehe)

.titleImage::before { 
content: "--------"; 
letter-spacing: -3px; 
} 

.titreImage::after { 
content: "--------"; 
letter-spacing: -3px; 
} 

Se la spaziatura tra le lettere rende così la linea di ottenere nel testo basta usare un margine di spingere via!