Perché questo layout di pagina di rottura quando un collegamento di ancoraggio è usato

mia pagina http://dl.dropbox.com/u/49912546/anchor_link_test.htm visualizza in modo diverso quando si utilizza troppo http://dl.dropbox.com/u/49912546/anchor_link_test.htm#vanquish-s un'ancora - tenore di seguito un'immagine viene spostata leggermentePerché questo layout di pagina di rottura quando un collegamento di ancoraggio è usato

Questo accade in modo coerente tutti i browser, quindi ci deve essere qualcosa nelle specifiche significa che questo è il comportamento corretto ... ma cosa? Succede solo quando viene caricata un'immagine (se src non è valido il problema non si verifica).

* modifica A proposito, ho trovato una soluzione alternativa già http://dl.dropbox.com/u/49912546/anchor_link_test_solved.htm#vanquish-s, quindi non sto cercando la correzione dei bug - Voglio solo sapere perché tutti i browser hanno implementazioni CSS che causano questo comportamento.

fonte

2011-11-23 wheresrhys

Forse dovresti Pubblica la tua soluzione alternativa, nel caso in cui qualcun altro abbia lo stesso problema e non sappia come risolverlo. – Yisela

good point - will do – wheresrhys

Si prega di leggere [Qualcosa sul mio sito web non funziona. Posso semplicemente incollare un collegamento ad esso?] (Http://meta.stackoverflow.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link -per-it). Le domande che dipendono da risorse esterne da comprendere diventano inutili quando la risorsa esterna va via o è riparata. Crea un [MCVE] e inseriscilo ** nella domanda stessa **. – Quentin

half content sembra spostare verso l'alto a causa della .panel suo contenuto all'interno è impostato overflow:hidden & ha contenuto che viene tagliato come risultato.

Quando il browser tenta di identificare l'elemento nell'ancora denominata, vede ciò che è all'interno di un contenitore che può ritagliare il suo contenuto & in modo da far scorrere l'elemento in alto per garantirne la visibilità.

Per esempio, se si dovesse aggiungere elementi all'interno contentInner ma soprattutto il nome h3, allora non sarebbero visibili nella pagina quando l'ancoraggio con nome è stato utilizzato come half content viene fatta scorrere in modo tale che h3 è in cima. (Lo stesso risultato come se overflow:scroll sono stati applicati, l'ancoraggio con nome fa sì che la barra di scorrimento di posizionarsi in linea con la parte superiore dell'elemento di nome)

fonte

2011-11-23 12:15:26

Dopo aver letto circa 5 volte ho finalmente capito, e sì, vedo perché il browser vorrebbe assicurarsi che l'elemento sia visibile. Ma il browser non è in grado di controllare prima se l'elemento collegato è troppo pieno prima di fare questo tipo di sollevamento? Inoltre, nei casi in cui l'elemento è nascosto utilizzando altri mezzi, ad es. posizione assoluta http://dl.dropbox.com/u/49912546/anchor_link_test_counterexample.htm#vanquish-s, il browser non tenta di trascinare il contenuto in visualizzazione. Quindi, perché i browser non accettano tale overflow: nascosto significa nascosto e salta al punto sensibile più vicino visibile? – wheresrhys

Sono d'accordo che è un modo goffo di fare le cose, qui c'è una discussione su questo comportamento; http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems –

-1

Nel mio caso la rimozione di overflow: hidden lavorato

#maincontent { 
    width: 100%; 
    background: transparent; 
    /* overflow: hidden; */ 
    clear:both; 
}

fonte

2017-10-12 12:04:46 NoWomenNoCry

Perché questo layout di pagina di rottura quando un collegamento di ancoraggio è usato

risposta

Problemi correlati