Spazio tra i pixel, ad es

Question

Ho quattro Div posizionati usando assoluto posizionamento, ognuno di essi è un bordo di un rettangolo che formano una volta raggruppati insieme, in modo da apparire come se fosse selezionato un elemento Dom sulla pagina (questo imita il comportamento del bordo CSS usando Div come sovrapposizioni).

• Quello di sinistra ha a bordo sinistro impostato su "4px rosso fisso", UN larghezza di 0pxe a altezza pari all'altezza dell'elemento Dom selezionato.

• Quello in alto ha un bordo superiore impostato su "4px rosso fisso", un'altezza di 0px e una larghezza pari alla larghezza dell'elemento Dom selezionato.

eccetera.puoi vedere dove sta andando.

So che è strano, ma è molto utile, vedi oritteropo per un esempio.

Quindi ecco come appare in FF, Opera, Safari e Chrome:

testo alternativo http://img243.imageshack.us/img243/429/captureyv.png

ed ecco come appare cioè 8 :

testo alternativo http://img190.imageshack.us/img190/7196/capture1dv.png

Ho subito pensato ad un problema del box model, ma non dovrebbe essere più stretto?e comunque, ho usato jquery per ottenere la larghezza e l'altezza, che dovrebbe prevenire questo tipo di problema.Ho attraversato il i più conosciuti, cioè i bug, ma non riesco a trovare una corrispondenza.

Cosa ne pensi ?

p.s.:questo è un bookmarklet, ovviamente ho provato a cambiare il doctype su un file locale e ha funzionato, ma in produzione non sarò in grado di farlo.

Utilizzo la barra degli strumenti ie dev per disegnare un bordo attorno all'elemento posizionato come assoluto:

testo alternativo http://img21.imageshack.us/img21/3425/capture2uc.png

Possiamo vedere il divario.

Answer 1

Controllare l'altezza "reale" del fondo div "confine" con la barra degli strumenti per sviluppatori di IE8. Assicurarsi che sia "0".

Provare quanto segue per quel div fondo.

<style type="text/css">
    #bottomBorder{
        /* Adding '!important' to each CSS rule 
           will make sure nothing else in your code is 'overwriting'
           that rule. (doesn't work for IE6)
        */
        line-height:0 !important; 
        font-size:0 !important;
        height:0 !important;
        border-bottom:solid 4px red;
        position:absolute;
    }
</style>

o provare:

<style type="text/css">
    #bottomBorder{
        border-top:solid 4px red;
    }
</style>

Quello che sto pensando è che IE non consente di impostare un div a 0px altezza. Ho visto questo su div prima.

Answer 2

Penso che dovresti giocherellare con il tuo DOCTYPE poiché questo di solito fa andare IE nella giusta direzione

Answer 3

Vorrei assumere questo problema ha a che fare con i margini e padding. Avete qualche informazione o distanziali interno delle div? Ciò potrebbe portare a spazio extra che non hai conto.

Vorrei regolare i div con margin: 0; border-collapse: crollo;

Inoltre, come lei aveva detto, sul DIV fondo si dovrebbe avere che insieme al suo bordo superiore per cercare di evitare che tali lacune che si verificano a causa di eventuali margini o la spaziatura all'interno del DIV in sé.

Answer 4

E 'possibile che IE8 non è compreso l'altezza del bordo come parte del suo parametro di altezza? Prova ad aggiungere la dimensione del bordo pure.

Answer 5

Ok, non ho una soluzione, per ora, ma ho appena visualizzo il bordo superiore div fondo invece del suo bordo inferiore e sembra abbastanza buono per ora. Se qualcuno conosce meglio, lui è ancora il benvenuto.