box-shadow e 100% Fluid Width Numero

Question

Ho lucidato una pagina che ho costruito negli ultimi giorni o due e ho incontrato un problema dopo aver usato box-shadow - Speravo che qualcuno potesse far luce su un modo semplice per risolvere questo problema.

Il programma di installazione: Ho un div che ha alcune proprietà, tra cui larghezza, larghezza massima e ombreggiatura.

#mydiv { 
     width:100%; 
     max-width:1200px; 
     -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1); 
     -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1); 
     box-shadow: 0px 0px 20px rgba(0, 0, 0, 1); 
} 

Il problema: La proprietà "box-ombra" aggiunge 40px alla larghezza dell'elemento div - 20px su ogni lato. Quando uno schermo è abbastanza piccolo da consentire al contenuto di raggiungere l'attributo di larghezza 100%, viene visualizzata una barra di scorrimento orizzontale. Dopo aver scavato nel CSS ho scoperto che era perché il div era tecnicamente qualcosa di più simile alla larghezza: 100% + 40px;

che cosa ho provato: Ho considerato l'impostazione overflow: hidden sul div genitore, ma ho un set min-width che sarebbe poi rendere il contenuto inaccessibile. Ho anche provato ad usare una percentuale per l'argomento size nel box-shadow CSS - 1% per esempio - e poi impostare la larghezza del div al 98% - ma il CSS box-shadow non sembra accettare una percentuale per il suo dimensione. Ho anche considerato l'utilizzo di javascript per testare la larghezza del browser e quindi visualizzare o nascondere l'elemento box-shadow di conseguenza, ma non sembra la soluzione ottimale.

Ci deve essere un modo più semplice per gestire questo. Pensieri?

Answer 1

È un bug del browser.

La spec usato per essere chiaro su questo, ma formulazione è stata da allora aggiunto per chiarire che le ombre non dovrebbero creare scorrimento:

Shadows non attivano lo scorrimento o aumentare la dimensione dell'area scorrevole.

Ma come risultato di questa omissione in precedenza, la maggior parte dei browser fatto grilletto scorrimento per le ombre. Questo è stato corretto in tutti i browser recenti.

In browser più vecchi, potrete sia necessario vivere con le barre di scorrimento, aggiungere overflow-x: hidden al vostro #mydiv e sperare che non si rompe nulla, o trovare un altro modo per aggiungere ombre (per esempio usando il buon vecchio PNG).

puoi anche consultare i seguenti due questioni correlate:

• Firefox & CSS3: using overflow: hidden and box-shadow
• CSS box shadow on container div causes scrollbars

Answer 2

C'è una soluzione al problema delle barre di scorrimento in siti larghezza fluida con scatola di ombra.

Se si aggiunge un'istruzione @media nel CSS, è possibile rilevare quando la finestra del browser si trova ad una certa larghezza (i browser moderni supportano questo e anche IE9 dovrebbe).

Ad esempio, per un div pagewrap centrato con un max-width impostato a 940px, prova ad aggiungere questo al vostro foglio di stile:

schermo @media e (min-width: 998px) { div # pagewrap { -moz-box-shadow: 3px 8px 26px # a1a09e; -webkit-box-shadow: 3px 8px 26px # a1a09e; box-shadow: 3px 8px 26px # a1a09e; }}

La larghezza minima di 998 px nel css @media è di far scomparire l'ombra esterna appena prima di attivare la barra di scorrimento.