Cтандартний CSS для Internet Explorer
Вперед в минуле до Internet Explorer
Іноді доводиться зустрічатися з замовниками сайту, які ще досі використовують Windows XP та відповідно Internet Explorer. Логіка клієнта наступна - якщо працює в IE6 то працюватиме і в новіших, а зворотної сумісності не буде. Хоча це завдання з розряду хардкорного ретро-розробництва! 🤯Для підтримки IE6-IE8 потрібно дотримуватися обмежень, які зараз виглядають як знущання, але якщо клієнт цього хоче – доведеться грати за його правилами.
Варто зауважити, що підхід "якщо працює в IE6, то працюватиме і в новіших версіях" має сенс лише для базових сайтів з простим дизайном.
Якщо вам потрібно чітко орієнтуватися в стандартах CSS для Internet Explorer, то нижче представлена таблиця яка допоможе розібратися з тим, як правильно адаптувати сайти для IE6-IE8:
| IE6 | IE7 | IE8 | IE9 | |
|---|---|---|---|---|
| a |
color: #0000ff;
text-decoration: underline;
|
color: #0066cc;
text-decoration: underline;
|
||
| a:visited |
color: #800080;
|
|||
| address |
display: block;
font-style: italic;
|
|||
| b |
font-weight: bold;
|
|||
| bdo |
direction: rtl;
unicode-bidi: bidi-override;
|
|||
| blockquote |
display: block;
margin: 14pt 30pt;
|
display: block;
margin: 1em 40px;
|
||
| body |
display: block;
margin: 15px 10px;
zoom: 1;
|
display: block;
margin: 8px;
zoom: 1;
|
||
| button |
background-color: #d4d0c8;
border-style: outset;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
text-align: center;
zoom: 1;
|
background-color: #f0f0f0;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
text-align: center;
zoom: 1;
|
background-color: #f0f0f0;
border-width: 3px;
box-sizing: border-box;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
padding: 1px 8px;
text-align: center;
zoom: 1;
|
|
| caption |
display: block;
padding: 1px 3px 5px;
text-align: center;
zoom: 1;
|
display: block;
padding: 1px 300zzz 500zzz;
text-align: center;
zoom: 1;
|
display: table-caption;
text-align: center;
zoom: 1;
|
|
| cite |
font-style: italic;
|
|||
| code |
font-family: monospace;
font-size: 10pt;
|
|||
| col |
border-color: #d4d0c8;
display: block;
|
border-color: #f0f0f0;
display: block;
|
box-sizing: border-box;
display: table-column;
|
|
| colgroup |
border-color: #d4d0c8;
display: block;
|
border-color: #f0f0f0;
display: block;
|
box-sizing: border-box;
display: table-column-group;
|
|
| dd |
display: block;
margin: 0 0 0 30pt;
|
display: block;
margin: 0 0 0 40px;
|
||
| del |
text-decoration: line-through;
|
|||
| dfn |
font-style: italic;
|
|||
| div |
display: block;
|
|||
| dl |
display: block;
margin: 14pt 0;
|
display: block;
margin: 1em 0;
|
||
| dt |
display: block;
|
|||
| em |
font-style: italic;
|
|||
| embed |
zoom: 1;
|
|||
| fieldset |
border-style: groove;
border-width: 2px;
display: block;
zoom: 1;
|
border-style: groove;
border-width: 2px;
display: block;
padding: 0 2px 3px;
zoom: 1;
|
border-style: groove;
border-width: 2px;
display: block;
margin: 0 2px;
padding: 0 2px 3px;
zoom: 1;
|
|
| form |
display: block;
margin: 14pt 0;
|
display: block;
|
||
| h1 |
display: block;
font-size: 24pt;
font-weight: bold;
margin: 14pt 0;
|
display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0;
page-break-after: avoid;
|
||
| h2 |
display: block;
font-size: 18pt;
font-weight: bold;
margin: 14pt 0;
|
display: block;
font-size: 1.5em;
font-weight: bold;
margin: 0.83em 0;
page-break-after: avoid;
|
||
| h3 |
display: block;
font-size: 13.55pt;
font-weight: bold;
margin: 14pt 0;
|
display: block;
font-size: 1.17em;
font-weight: bold;
margin: 1em 0;
page-break-after: avoid;
|
||
| h4 |
display: block;
font-weight: bold;
margin: 14pt 0;
|
display: block;
font-size: 1em;
font-weight: bold;
margin: 1.33em 0;
page-break-after: avoid;
|
||
| h5 |
display: block;
font-size: 10pt;
font-weight: bold;
margin: 14pt 0;
|
display: block;
font-size: 0.83em;
font-weight: bold;
margin: 1.67em 0;
page-break-after: avoid;
|
||
| h6 |
display: block;
font-size: 7.55pt;
font-weight: bold;
margin: 14pt 0;
|
display: block;
font-size: 0.67em;
font-weight: bold;
margin: 2.33em 0;
page-break-after: avoid;
|
||
| head |
display: none;
|
|||
| hr |
text-align: center;
zoom: 1;
|
outline: 0 none;
text-align: center;
zoom: 1;
|
border-style: inset;
border-width: 1px;
display: block;
margin-bottom: 0.5em;
margin-top: 0.5em;
overflow: hidden;
text-align: center;
zoom: 1;
|
|
| html |
overflow-x: auto;
overflow-y: scroll;
zoom: 1;
|
display: block;
zoom: 1;
|
||
| i |
font-style: italic;
|
|||
| iframe |
background-color: #ffffff;
height: 150px;
width: 300px;
zoom: 1;
|
|||
| img |
zoom: 1;
|
|||
| input |
background-color: #ffffff;
border-style: inset;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
padding: 1px;
zoom: 1;
|
background-color: #ffffff;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
padding: 1px;
zoom: 1;
|
||
| ins |
text-decoration: underline;
|
|||
| kbd |
font-family: monospace;
font-size: 10pt;
|
|||
| legend |
zoom: 1;
|
padding: 0 2px;
zoom: 1;
|
||
| li |
display: block;
|
display: list-item;
|
||
| menu |
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin: 14pt 0 14pt 30pt;
|
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin: 1em 0;
padding: 0 0 0 30pt;
|
||
| object |
zoom: 1;
|
|||
| ol |
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: decimal;
margin: 14pt 0 14pt 30pt;
|
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: decimal;
margin: 1em 0;
padding: 0 0 0 30pt;
|
||
| optgroup |
font-family: sans-serif;
font-size: 10pt;
font-style: italic;
font-weight: bold;
|
|||
| option |
font-family: sans-serif;
font-size: 10pt;
font-style: italic;
font-weight: bold;
|
|||
| p |
display: block;
margin: 14pt 0;
|
display: block;
margin: 1em 0;
|
||
| pre |
display: block;
font-family: monospace;
font-size: 10pt;
white-space: pre;
|
display: block;
font-family: monospace;
font-size: 10pt;
margin: 1em 0;
white-space: pre;
|
||
| rp |
font-size: 6pt;
|
|||
| rt |
font-size: 6pt;
|
display: ruby-text;
font-size: 6pt;
|
||
| ruby |
display: ruby;
|
|||
| samp |
font-family: monospace;
font-size: 10pt;
|
|||
| script |
display: none;
zoom: 1;
|
|||
| select |
border-color: #ffffff;
border-style: inset;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
zoom: 1;
|
background-color: #ffffff;
border-color: #ffffff;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
zoom: 1;
|
background-color: #ffffff;
border-width: 1px;
box-sizing: border-box;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
zoom: 1;
|
|
| small |
font-size: 10pt;
|
font-size: 0.83em;
|
||
| strong |
font-weight: bold;
|
|||
| style |
display: none;
zoom: 1;
|
|||
| sub |
font-size: 10pt;
|
font-size: 0.83em;
|
||
| sup |
font-size: 10pt;
|
font-size: 0.83em;
|
||
| table |
border-color: #d4d0c8;
display: block;
zoom: 1;
|
border-color: #f0f0f0;
display: block;
zoom: 1;
|
border-color: #f0f0f0;
border-spacing: 2px 2px;
box-sizing: border-box;
display: table;
zoom: 1;
|
|
| tbody |
border-color: #d4d0c8;
display: block;
|
border-color: #f0f0f0;
display: block;
|
box-sizing: border-box;
display: table-row-group;
vertical-align: middle;
|
|
| td |
border-color: #d4d0c8;
display: block;
padding: 1px;
zoom: 1;
|
border-color: #f0f0f0;
display: block;
padding: 1px;
zoom: 1;
|
display: table-cell;
padding: 1px;
vertical-align: middle;
zoom: 1;
|
|
| textarea |
background-color: #ffffff;
border-style: inset;
border-width: 2px;
font-family: monospace;
font-size: 10pt;
overflow-x: hidden;
overflow-y: scroll;
padding: 1px;
white-space: pre;
zoom: 1;
|
background-color: #ffffff;
border-width: 2px;
font-family: monospace;
font-size: 10pt;
overflow-x: hidden;
overflow-y: scroll;
padding: 2px;
white-space: pre;
zoom: 1;
|
background-color: #ffffff;
border-width: 1px;
font-family: monospace;
font-size: 10pt;
overflow-x: hidden;
overflow-y: scroll;
padding: 2px;
white-space: pre-wrap;
zoom: 1;
|
|
| tfoot |
border-color: #d4d0c8;
display: block;
|
border-color: #f0f0f0;
display: block;
|
box-sizing: border-box;
display: table-footer-group;
vertical-align: middle;
|
|
| th |
border-color: #d4d0c8;
display: block;
font-weight: bold;
padding: 1px;
text-align: center;
zoom: 1;
|
border-color: #f0f0f0;
display: block;
font-weight: bold;
padding: 1px;
text-align: center;
zoom: 1;
|
display: table-cell;
font-weight: bold;
padding: 1px;
text-align: center;
vertical-align: middle;
zoom: 1;
|
|
| thead |
border-color: #d4d0c8;
display: block;
|
border-color: #f0f0f0;
display: block;
|
box-sizing: border-box;
display: table-header-group;
vertical-align: middle;
|
|
| tr |
border-color: #d4d0c8;
display: block;
zoom: 1;
|
border-color: #f0f0f0;
display: block;
zoom: 1;
|
box-sizing: border-box;
display: table-row;
vertical-align: middle;
zoom: 1;
|
|
| ul |
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin: 14pt 0 14pt 30pt;
|
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin: 1em 0;
padding: 0 0 0 30pt;
|
||
| var |
font-style: italic;
|
|||
Internet Explorer і логотип Internet Explorer є зареєстрованими товарними знаками або товарними знаками Microsoft Corporation у США та/або інших країнах.
Таблицю створив Джонатан Ніл , у зв'язку з тим, що оригінальний сайт з таблицею вже має іншого власника і контент, тому я вирішив її опублікувати на цьому сайті.
☕️Якщо Ви вважаєте цей допис корисним, можете За що я Вам буду дуже вдячний! 😊
Коментарі