posizione: assoluta rende un elemento hr più largo del 100%

Question

In FX e IE il codice seguente crea due barre, ma quella blu è leggermente più larga della schermata del browser. Qualsiasi ridimensionamento lascerà una barra di scorrimento orizzontale con la coda della barra blu fuori dallo schermo a sinistra. Questo è ridotto da una pagina molto più grande e non posso rimuovere la posizione: elemento assoluto nell'originale. Qualcuno può capire come rendere la barra blu larga solo al 100% in modo che corrisponda a quella rossa e non causi una barra di scorrimento orizzontale? Qualche idea cosa c'è dietro questo comportamento? Sono perplesso. Grazie mille.

<hr style="border:1px solid red; width:100%;"/> 
 
<hr style="position:absolute; border:1px solid blue; width:100%;" />

Answer 1

Semplicemente:

body {position:relative;} 

Demohttp://jsfiddle.net/qyvtzyfh/

Motivo:

In una descrizione semplificata molto breve, position:absolute; e width:100%; sull'elemento rendono la larghezza dell'elemento relativo al genitore immediato con un valore definito esplicitamente position:relative; o position:absolute;, nel tuo caso poiché non ce l'hai, ottiene la larghezza di il blocco iniziale contenente (che contiene anche l'elemento) anziché lo body, aggiungendo alla larghezza dell'elemento relativo a body (oltre alla sua posizione).