Molti siti Web moderni utilizzano fogli di stile CSS (CSS), uno standard Web progettato per gestire lo stile, la struttura e il design di elementi HTML e pagine. La proprietà di "max-width" è stato introdotto con CSS2 e funziona in modo identico con il più recente standard CSS3. Utilizzando "max-width" è possibile impostare un valore di fluido, regolabile per il vostro contenuto, piuttosto che uno statico. Questo può essere utilizzato efficacemente per le immagini e per i layout che si adattano per risoluzione dello schermo del visitatore. La larghezza massima può essere impostata in pixel, centimetri o come percentuale della larghezza dello schermo totale.

Supporto browser

Per la maggior parte, il browser supportano l'attributo di "max-width" in CSS. Questo significa che maggior parte degli utenti di Internet non avranno problemi con il layout, soprattutto coloro che utilizzano il browser Firefox, Chrome e Opera. Tuttavia, ci sono bug significativi per quanto riguarda la larghezza massima in Internet Explorer 5.5, 6.0 e 8.0, così come Safari 1.3. Alcuni di questi browser non sono più in uso, ma tra Internet Explorer 6 e 8, quasi il 30 per cento degli utenti online dispongono di un browser che non supportano questo CSS di base o hanno problemi significativi visualizzarla.

Valori in conflitto

È possibile utilizzare sia "larghezza" e "max-width" nello stesso elemento, fino a quando si utilizzano valori diversi. Per esempio, se si desidera che la pagina per riempire il 75% della larghezza dello schermo, ma non andare più grandi di 1000 pixel, si esprimerebbe questo come:

elemento () {

Larghezza: 75%;
Larghezza massima: 1000px; }

Se si definisce sia "width" e "max-width" dai pixel, sta sempre per la larghezza massima..--facendo uso dell'elemento erronea e dispendioso per impostazione predefinita.

Problemi di Internet Explorer

Internet Explorer è pieno di bug riguardanti la proprietà max-width. Internet Explorer 7 e versioni precedenti non presentava alcun supporto per il valore di "ereditare" per "max-width," che indica l'elemento da utilizzare lo stesso valore come elemento padre. In Internet Explorer 8, è possibile utilizzare "ereditano" fino a quando si imposta un doctype valido per la tua pagina. Mentre Internet Explorer 8 supporta larghezza max in teoria, larghezza massima viene ignorato in Internet Explorer 8 quando un elemento viene spostato, il valore di overflow è impostato su "scorrimento" o "auto" e ha una serie di altezza max. Gli elementi figlio non adatta anche alla dimensione corretta in IE8. Questi errori non erano presenti in Internet Explorer 7. Internet Explorer 6 e versioni precedenti non supportano affatto larghezza max.

Potenziali riparazioni

Per gli utenti di Internet Explorer 8, è possibile ottenere migliore CSS 2.1 e limitato supporto per CSS3 raccontando il documento da eseguire utilizzando standard di IE8. Per effettuare questa operazione, è necessario inserire questo tag meta direttamente di sotto del tag < head > nel documento:

< meta http-equiv = "X-UA-Compatible" content = "IE = 8" / >

Modificare questo tag meta consente di modificare il modo in cui Internet Explorer interpreta tua pagina. Per esempio, se si desidera visualizzare la pagina utilizzando Internet Explorer 7 standard, si imposterebbero contenuto a "IE = 7".

Programmatore tedesco David Mueller progettato uno script semplice riparazione per i browser che non supportano i CSS di larghezza max. Questo codice è disponibile sul sito Web CSS Tricks come "Fix Min/Max-Width per i browser senza supporto nativo." Comprendendo questo, aiuterà a rendere più funzionale il layout nei browser che non supportano il "max-width", ma potrebbe non essere così disponibile su browser che hanno scarso supporto per la proprietà.