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 у США та/або інших країнах.
Таблицю створив Джонатан Ніл , у зв'язку з тим, що оригінальний сайт з таблицею вже має іншого власника і контент, тому я вирішив її опублікувати на цьому сайті.
Коментарі:
Завантаження коментарів…