---
url: 'https://simonerescio.it/2017/05/internet-explorer-8-supporta-parzialmente-box-sizing-nelle-tabelle'
title: Internet Explorer 8 supporta parzialmente il box-sizing nelle tabelle
author:
  name: Simone Rescio
  url: 'https://simonerescio.it/chi-sono/'
date: '2017-05-07T23:09:37+02:00'
modified: '2026-04-25T01:02:23+02:00'
type: post
summary: 'In Internet Explorer 8 la proprietà box-sizing ha un caso limite: tabelle a larghezza dinamica e padding in percentuale non rispettano border-box come ti aspetti. Box model legacy, link a Can I use e uno snippet di prova.'
categories:
  - CSS
tags:
  - css table
  - css3
  - ie
  - legacy
image: 'https://simonerescio.it/wp-content/uploads/2017/05/legacy-of-ie8.png'
published: true
---

# Internet Explorer 8 supporta parzialmente il box-sizing nelle tabelle

Non molto tempo fa, nel periodo oscuro in cui i browser erano sprovvisti di *developer tools* nativi, ed *Internet Explorer 6* dominava indisturbato il panorama del web imponendo dolore e sofferenza a tutti gli sviluppatori Front End del mondo, la proprietà fondamentale dei CSS ovvero il **box model**, la formula che determina lo sviluppo delle grandezze in larghezza e altezza degli elementi sulla pagina, per *Micro$oft* prevedeva uno sviluppo verso l’interno dell’elemento.

Dunque impostando `height` e/o `width` per esempio a *100px*, `borders` a *10px* e `padding` a *20px*, l’ingombro complessivo sulla pagina resta *100px*, tuttavia nel modello previsto dalle *specifiche CSS* l’ingombro complessivo diventa *130px*.

![Animazione Legacy of Kain: Soul Reaver, transizione da border-box a content-box](https://simonerescio.it/wp-content/uploads/2017/05/Legacy_of_Kain-Soul_Reaver_PC_42.gif)*Legacy of Kain: Soul Reaver, Raziel passa da border-box a content-box*

Le specifiche CSS prevedevano, appunto, che gli ingombri di bordi e padding si sviluppassero all’esterno dell’elemento, aggiungendosi alle dimensioni esistenti. Dal momento che l’uno o l’altro comportamento possono risultare preferibili in situazioni diverse, e ormai la frittata era fatta, si optò di seguire come modello predefinito nei browser quello a sviluppo esterno, ma lasciare potere decisionale agli sviluppatori donando la proprietà CSS `box-sizing`.

Questa proprietà CSS3 è stata supportata fin dalle prime versioni di tutti i browser moderni, incluso **Internet Explorer 8**, con un paio di ***eccezioni note*** su Stack Overflow e [caniuse](https://caniuse.com/#search=box-sizing).

[![Screenshot Can I use: supporto CSS box-sizing in Internet Explorer 8 (2017)](https://simonerescio.it/wp-content/uploads/2017/05/caniuse-box-sizing-ie8-201705-1024x544.png)](https://simonerescio.it/2017/05/internet-explorer-8-supporta-parzialmente-box-sizing-nelle-tabelle/caniuse-box-sizing-ie8-201705)

## Tabelle e padding percentuali sono un brutto mix

Un caso in cui torna utile il vecchio modello, dove le dimensioni dell’elemento partono dai bordi (*border-box*), è ad esempio quando abbiamo due o più contenitori allineati a larghezza dinamica, così che quando la dimensione della finestra cambia l’elemento si allunga o accorcia mantenendo le proporzioni tra i suoi contenitori, ed i contenuti nei singoli contenitori si adattano ad essi, usando una `<table>` e delle celle in una riga si ottiene facilmente questo effetto.

[![Bug IE8: padding percentuale applicato fuori dalla cella con tabella e box-sizing: border-box](https://simonerescio.it/wp-content/uploads/2017/05/ie8-percentage-padding-bug-1-1024x338.png)](https://simonerescio.it/2017/05/internet-explorer-8-supporta-parzialmente-box-sizing-nelle-tabelle/ie8-percentage-padding-bug-2)

In questo esempio il contenuto della cella di sinistra ha una larghezza di *100%* così che si espanda dentro il contenitore ed un padding a destra percentuale così che lasci del respiro quando i contenuti stanno per andare a ridosso della cella adiacente, ma dall’ispezione risulta che quel `padding-right: 1.5%` non viene aggiunto all’interno bensì all’esterno ignorando la direttiva `box-sizing` restituendo una larghezza del `101.5%`.

Incuriosito dal risultato ho prodotto uno [snippet](https://codepen.io/srescio/pen/Mmvaeb) che mette alla prova il `box-sizing` in tre contesti:

- contenitore e contenuto `<div>` con `padding` in unità *percentuale*

- contenitore `<table>` e contenuto `<div>` con `padding` in unità *percentuale*

- contenitore `<table>` e contenuto `<div>` con `padding` in unità *fissa*

Eseguito su un browser moderno, tutti e tre gli esempi hanno la stessa larghezza, mentre su IE8 nel *secondo esempio* il contenuto viene buttato fuori dal suo contenitore, per cui è bene evitare di usare padding percentuali se il contenitore è una tabella e il contenuto deve rispondere a `border-box`.

[![Confronto larghezze: snippet box-sizing su IE8 rispetto a un browser moderno](https://simonerescio.it/wp-content/uploads/2017/05/box-sizing-snippet-in-IE8.png)](https://simonerescio.it/2017/05/internet-explorer-8-supporta-parzialmente-box-sizing-nelle-tabelle/box-sizing-snippet-in-ie8)

 [](https://mastodon.social/share?text=http%3A%2F%2Fsresc.io%2FtLx&title=Internet%20Explorer%208%20supporta%20parzialmente%20il%20box-sizing%20nelle%20tabelle)[](https://www.linkedin.com/sharing/share-offsite/?url=http%3A%2F%2Fsresc.io%2FtLx)[](https://simonerescio.it/2017/05/internet-explorer-8-supporta-parzialmente-box-sizing-nelle-tabelle)[](https://reddit.com/submit?url=http%3A%2F%2Fsresc.io%2FtLx&title=Internet%20Explorer%208%20supporta%20parzialmente%20il%20box-sizing%20nelle%20tabelle)[](https://api.whatsapp.com/send?text=Internet%20Explorer%208%20supporta%20parzialmente%20il%20box-sizing%20nelle%20tabelle http%3A%2F%2Fsresc.io%2FtLx)[](https://bsky.app/intent/compose?text=Internet%20Explorer%208%20supporta%20parzialmente%20il%20box-sizing%20nelle%20tabelle%20http%3A%2F%2Fsresc.io%2FtLx)[](https://telegram.me/share/url?url=http%3A%2F%2Fsresc.io%2FtLx&text=Internet%20Explorer%208%20supporta%20parzialmente%20il%20box-sizing%20nelle%20tabelle)[](https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsresc.io%2FtLx)