Come abilitare il dimensionamento della casella in Internet Explorer 7 [Quicktip]

Abbiamo coperto il dimensionamento della scatola CSS3 in un precedente articolo. Il dimensionamento della scatola, con il valore di border-box, ci consente di mantenere la larghezza e l'altezza dell'elemento, indipendentemente dal riempimento e dal bordo aggiuntivi.

Ciò semplifica la misurazione e la definizione della dimensione dell'elemento . Tuttavia, il dimensionamento dei riquadri CSS3 non funzionerebbe in Internet Explorer 7 (IE7) e nelle versioni precedenti, come puoi vedere di seguito.

Entrambe le colonne che vedi nello screenshot qui sopra hanno width, height, padding e box-sizing specificati. Ma poiché IE8 non riconosce la proprietà di box-sizing della box-sizing, la seconda colonna viene spostata verso il basso quando la loro larghezza totale supera la larghezza del contenitore principale .

Dovrai adattare le dimensioni di ciascuna colonna in modo da adattarle, il che potrebbe essere un compito molto noioso a seconda del numero di elementi che devi gestire . Se il tuo sito web deve supportare IE7 (per qualsiasi motivo) pur preservando il dimensionamento dei riquadri CSS3, puoi utilizzare il seguente trucco.

Box Sizing Polyfill

Per fare in modo che IE8 (e sotto) riconosca il dimensionamento della scatola, possiamo usare un polyfill. Questo polyfill si presenta sotto forma di un file HTC ed è sviluppato da Christian Schaefer. Scarica il file dal repository Github e inseriscilo, ad esempio, nella cartella CSS.

Crea un foglio di stile CSS, dedicato a Internet Explorer. Aggiungi il link nel documento HTML in questo modo in modo che venga pubblicato solo in IE7.

Quindi inserisci il codice seguente in ie.css . La seguente regola CSS applicherà il box-sizing per tutti gli elementi.

 * {comportamento: url (css / boxsizing.htc); } 

Alcune cose da notare quando si applica questo trucco:

Il percorso url di boxsizing.htc deve essere relativo alla posizione dei file HTML, altrimenti non funzionerà.

Paul Irish ha anche un consiglio per applicare il box-sizing della box-sizing nello pseudo-elemento con *:before, *:after . Ma poiché IE7 e IE6 non supportano lo pseudo-elemento, in questo caso non c'è motivo di utilizzare i selettori di pseudo-elementi. E come puoi vedere sopra, non li includiamo anche nel codice.

Il risultato

Qui, abbiamo due colonne con la larghezza del contenitore genitore impostata su 500px. La larghezza della colonna è impostata al 50%, quindi ogni colonna dovrebbe avere una larghezza di 250 px, anche se abbiamo impostato anche il padding. Apriamo Internet Explorer 7 e lanciamo lo Strumento per sviluppatori (F12).

Vai alla scheda Layout dello Strumento per sviluppatori per vedere le dimensioni della colonna in dettaglio. Dovresti vedere che in IE7 la colonna ora include padding e bordi come parte della dimensione totale. Nel nostro caso, la larghezza della scatola rimane a 250px.

Trasforma la tua classe in una macchina del tempo [Infografica]

Gli insegnanti di tutto il mondo si stanno riscaldando all'idea di introdurre la tecnologia nelle scuole e non ci riferiamo solo alla realtà aumentata o alla stampa 3D qui. Queste cose sono semplici strumenti che gli insegnanti possono usare - è ciò che fa l'educatore per migliorare l'esperienza di apprendimento che scatena il potenziale di queste tecnologie, dei dispositivi e dei loro contenuti.Ad

(Consigli tecnici e di design)

30 foto incredibili a infrarossi

Prendiamo la nostra capacità di vedere per scontato, su base giornaliera, eppure i colori svolgono ruoli così cruciali in ogni nostro processo decisionale. Ma non siamo qui per parlarne. Oggi siamo qui per mostrarti il ​​mondo sotto una luce diversa - letteralmente.Nelle seguenti 30 fotografie vedrai scene, paesaggi e oggetti di ogni giorno in condizioni molto diverse: nell'infrarosso. Vede

(Consigli tecnici e di design)