Проблемы совместимости браузера и решения (рекомендуемая коллекция)

внешний интерфейс браузер

предисловие

Однажды ко мне неожиданно подошел руководитель и сказал, что в будущем мы можем решить проблемы с совместимостью для некоторых старых систем. Я тоже невинно спросил: «Сколько ему лет?» «О, оно не слишком старое, просто используйтеjspГрамматика написана, она может быть только совместимаIE7Да, теперь, чтобы быть совместимымIE8,IE9и браузеры, такие как Firefox, Google"

u=1570229777,3886717131&fm=26&gp=0.jpg

jsp?IE7? ?IE8? ? ?IE9? ? ? ? Проблемы совместимости? ? ? ? ? Тогда я пойду?

Невозможно ходить, но я хочу услышать, что когда он будет совместим с браузером IE, большинство фронтенд-разработчиков будут улыбаться на поверхности, а MMP в их сердцах.

Затем руководитель прислал мне несколько документов Word, в которых есть некоторые проблемы с совместимостью и решения, но они очень запутаны, дайте мне разобраться. вызов! Тогда организуйте это и успокойтесь.Это также редкая возможность войти в контакт с ранней разработкой системы.

Закончив расстановку, руководитель вернулся с новой информацией, сказав, что нам не нужно заниматься обработкой совместимости, пока мы организуем этот документ и сделаем демонстрационное руководство по решению проблемы совместимости, то есть пока как есть проблема, это хорошо, чтобы обеспечить техническую поддержку. Хахаха, повороты и повороты, очень счастлив!

мне не нужно даватьjspСтарая система совместима с браузером IE, ха-ха, надеюсь, вам не придется это делать!

Ниже представлена ​​собранная информация:

1. Разберитесь с браузером

Основные браузерыИх пять: IE (ядро Trident), Firefox (Firefox: ядро ​​Gecko), Safari (Apple: ядро ​​webkit), Google Chrome (Google: ядро ​​Blink), Opera (Opera: ядро ​​Blink)

Четыре ядра: Trident (ядро IE), Gecko (ядро Firefox), ядро ​​webkit, Blink (ядро Chrome)

Во-вторых, понять проблемы совместимости

Продвижение стандартов W3C, появление Firefox, Chrome, Safari и Opera положили конец дням, когда IE доминировал в мире.

Однако это и хорошо, и плохо для разработчиков. Это хорошо, потому что для того, чтобы завоевать большую долю рынка, производители браузеров сделают каждый браузер более совместимым со стандартом W3C и получат лучшую совместимость, а функции расширения разных браузеров (такие как-moz,-webkitstyle в начале), что также является толчком к стандарту W3C; это плохо, потому что одновременно существует несколько браузеров, и эти браузеры иногда ведут себя по-разному при работе с одной и той же страницей. Эта разница может быть небольшой и даже незаметной, а может быть настолько большой, что невозможно нормально просматривать страницы в определенном браузере. Мы называем проблемы, вызывающие эти различия, общим названием «проблемы совместимости браузеров». Именно эти «проблемы совместимости с браузерами» фактически добавляют много трудностей в нашу разработку.

1. В чем проблема совместимости?

отвечать:Один и тот же код, эффект отображения страницы в разных браузерах разный

2. Каковы причины различия?

отвечать:Браузеры Браузеры используют разные ядра, и они по-разному думают об одном и том же.

3. Почему у браузеров возникают проблемы с совместимостью?

  • Тот же браузер, чем старше версия, тем большеbugЧем больше, тем меньше поддержка новых атрибутов, тегов и новых функций по сравнению с браузерами более новых версий.
  • Разные браузеры имеют разные базовые технологии (ядра), разные стандарты и разные методы реализации, и конечный эффект будет разным перед публикой.
  • Дизайнеры пишут нестандартный код, что сделает несовместимость более заметной..

С точки зрения ядра браузера проблемы совместимости браузера можно разделить на следующие три категории:

  • Связанные с рендерингом: истильСвязанная проблема, то есть проблема, отраженная в эффекте макета.
  • Связанный сценарий: исценарийСвязанные проблемы, включая JavaScript и DOM, проблемы со спецификациями. Для некоторых функций браузера он также попадает в эту категорию.
  • Другие категории: функциональные проблемы, отличные от двух указанных выше типов проблем, как правило, представляют собой функции, предоставляемые самим браузером над уровнем ядра.

Нерегулярное вложение:

<div>
   <li>新闻标题一</li>
   <li>新闻标题一</li>
   <li>新闻标题一</li>
</div>

divнепосредственно вложенный вliэлементы некачественные,liдолжен быть вilВнутри. такие проблемы тоже бываютpвложенный вdiv,tableи другие элементы.

Нестандартный интерфейс DOM и настройки свойств:

document.all.a_name.style.top = 35;

в приведенном выше кодеtop的值，其实应该是一个字符串值，需有单位。 Например:35px.

Короче говоря, человеческие причины также составляют большую часть. Причины антропогенных проблем совместимости, помимо небрежности, в основном связаны с наличием ошибок браузера и непониманием стандартов разработчиками.

Например, если вы хотите создать функцию, она будет заключаться в том, чтобы наводить указатель мыши наimgНад элементом может появиться подсказка.Люди, которые часто разрабатывают для IE, могут использоватьimgэлементаль"alt"атрибут, но не указан в других браузерах"alt"атрибут лица. Поскольку свойство, указанное в стандарте W3C для этого,"title", большинство браузеров соответствует стандарту, IE нет, это проблема ядра браузера IE, разработчик не знает"title", Проблема разработчика - писать код, не соответствующий стандарту.

Итак, проблема делится на две половины, и ответственность несет и браузер, и разработчик. Поскольку все они несут ответственность, все они обязаны решать проблемы совместимости. Что ж, с точки зрения браузера, его производитель должен исправитьbugи некачественный, когда когда-нибудь IE"alt"Его нельзя использовать для подсказок. Кто-нибудь еще использует этот неправильный атрибут для отображения подсказок? С точки зрения разработчика, если вы знаете больше о стандартах и ​​проблемах совместимости браузеров, вы можете эффективно избежать проблем совместимости в процессе разработки и сделать ваши страницы беспрепятственными во всех браузерах.

3. Идеи для решения проблем совместимости

1. Вы хотите это сделать?

(1) С точки зрения продукта: аудитория продукта, доля браузеров аудитории, приоритет эффекта или приоритет базовой функции.

(2) С точки зрения стоимости: нет необходимости делать это совместимым.

2. В какой степени?

A: Какие браузеры поддерживают какие эффекты.


3. Как это сделать?
(1) Выберите техническую структуру/библиотеку (например,jquery 1.x.x).
(2) Выберите совместимые инструменты в соответствии с требованиями совместимости:html5shiv,Respond.js,CSS Reset,normalize.css,Modernizr.js,postcss.
(3) Условные комментарии,CSS Hack,jsОбнаружение возможностей делает некоторые изменения.
Hack:CSS середина,Hackозначает совместимыйCSSТрюки для корректного отображения в разных браузерах, пропатченыbugМетоды
Filter: Указывает значение фильтра, который представляет собой метод отображения или скрытия правил или объявлений для определенного браузера или группы браузеров. По сути,Filter Даhackодин из методов.

4. Прогрессивное улучшение и плавная деградация
(1)прогрессивное улучшение: создавайте страницы для браузеров с более низкими версиями, чтобы обеспечить самые основные функции, а затем улучшайте и добавляйте такие функции, как эффекты и взаимодействия для продвинутых браузеров, чтобы улучшить взаимодействие с пользователем.
(2)изящная деградация: Создайте полную функциональность с самого начала, а затем сделайте ее совместимой со старыми браузерами.

4. Совместимость с JavaScript

1,addEventListenerа такжеattachEventразница

attachEvent- Совместимо: IE7, IE8; несовместимо с firefox, chrome, IE9, IE10, IE11, сафари, оперой.
addEventListener- Совместимость с: firefox, chrome, IE, safari, opera; не совместима с IE7, IE8
решение:

function addEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) { // W3C标准
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent) { // IE
    var r = elm.attachEvent('on' + evType, fn); // IE5+
    return r;
  } else {
    elm['on' + evType] = fn; // DOM事件
  }
}

2,document.formName.item("itemName")вопрос

Описание проблемы: В IE вы можете использоватьdocument.formName.item("itemName")илиdocument.formName.elements ["elementName"]; под Firefox используйте толькоdocument.formName.elements["elementName"].
Решение: унифицированное использованиеdocument.formName.elements["elementName"].

3. Проблема объекта класса коллекции

Описание проблемы: В IE вы можете использовать()или[]Получите объект класса коллекции; в Firefox вы можете использовать только[ ]Получите объект класса коллекции.
Решение: унифицированное использование[]Получите объект класса коллекции.

4. Проблема с пользовательскими атрибутами

Описание проблемы: Под IE можно использовать метод получения общих атрибутов для получения пользовательских атрибутов, а можно использоватьgetAttribute()Получите пользовательские свойства; в Firefox вы можете использовать толькоgetAttribute()Получить пользовательские свойства.
Решение: единый пропускgetAttribute()Получить пользовательские свойства.

5.eval("idName")вопрос

Описание проблемы: В IE вы можете использоватьeval("idName")илиgetElementById("idName")получитьidдляidNameHTML-объект; в Firefox используйте толькоgetElementById("idName")получитьidдляidNameHTML-объект.
Решение: унифицированное использованиеgetElementById("idName")получитьidдляidNameHTML-объект.

6. Проблема в том, что имя переменной совпадает с идентификатором объекта HTML.

Описание проблемы: в IE идентификатор HTML-объекта можно использовать какdocumentВ Firefox вы можете использовать то же имя переменной, что и идентификатор объекта HTML, но не в IE.
Решение: использоватьdocument.getElementById("idName")заменятьdocument.idName. Лучше не брать имя переменной с одним и тем же идентификатором HTML-объекта, чтобы уменьшить количество ошибок; при объявлении переменных всегда добавляйтеvarключевые слова, чтобы избежать двусмысленности.

7.constвопрос

Описание проблемы: В Firefox вы можете использоватьconstключевое слово илиvarКлючевые слова для определения констант; в IE используйте толькоvarключевое слово для определения констант.
Решение: унифицированное использованиеvarключевое слово для определения констант.

8,input.typeпроблема собственности

Описание проблемы: под IEinput.typeСвойство доступно только для чтения, однако в Firefoxinput.typeСвойство доступно для чтения и записи.
Решение: не изменятьinput.typeАтрибуты. Если вам нужно изменить его, вы можете сначала скрыть оригиналinput, а затем вставьте новыйinputэлемент.

9,window.eventвопрос

Описание проблемы:window.eventОн может работать только в IE, но не в Firefox, потому что FirefoxeventМожно использовать только на месте происшествия.
Решение: добавьте функцию, в которой происходит событиеeventпараметры в теле функции (при условии, что параметрevt)использоватьvar myEvent = evt?evt:(window.event? window.event:null)
Пример:

<input type="button" onclick="doSomething(event)"/>
<script language="javascript"> 
  function doSomething(evt) {
		var myEvent = evt ? evt :(window.event ? window.event : null);
		…
	}
</script>

10.event.xа такжеevent.yвопрос

Описание проблемы: В IE,eventобъект имеетx,yсвойства, но нетpageX,pageYсвойства; в Firefox,eventобъект имеетpageX,pageYсвойства, но нетx,yАтрибуты.
решение:var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;
Если вы рассматриваете вопрос 8, используйте вместо негоmyEventзаменятьeventВот и все.

11.event.srcElementвопрос

Описание проблемы: В IE,eventобъект имеетsrcElementсвойства, но нетtargetсвойства; в Firefox,eventобъект имеетtargetсвойства, но нетsrcElementАтрибуты.
Решение: использоватьsrcObj = event.srcElement ? event.srcElement : event.target;
Если вы рассматриваете вопрос 8, используйте вместо негоmyEventзаменятьeventВот и все.

12.window.location.hrefвопрос

Описание проблемы: В IE или Firefox2.0.x вы можете использоватьwindow.locationилиwindow.location.href;В Firefox 1.5.x используйте толькоwindow.location.
Решение: использоватьwindow.locationзаменитьwindow.location.href. Конечно, вы также можете рассмотреть возможность использованияlocation.replace()метод.

13. Проблемы с модальными и немодальными окнами

Описание проблемы: Под IE можно пройтиshowModalDialogа такжеshowModelessDialogОткрывает модальные и немодальные окна; не в Firefox.
Решение: использовать напрямуюwindow.open(pageURL,name,parameters)способ открыть новое окно.
Если вам нужно передать параметры из дочернего окна обратно в родительское окно, вы можете использовать в дочернем окнеwindow.openerдля доступа к родительскому окну. Если вам нужно родительское окно для управления дочерним окном, используйтеvar subWindow = window.open(pageURL,name,parameters);чтобы получить недавно открытый объект окна.

14.frameа такжеiframeвопрос

со следующимframeНапример:
(1) Доступframeобъект
ИИ: использоватьwindow.frameIdилиwindow.frameNameпосетить этоframeобъект;
Фаерфокс: использоватьwindow.frameNameпосетить этоframeобъект;
Решение: унифицированное использованиеwindow.document.getElementById("frameId")посетить этоframeобъект;
(2) Переключательframeсодержание
Работает как в IE, так и в Firefoxwindow.document.getElementById("frameId").src = "webjx.com.html"илиwindow.frameName.location = "webjx.com.html"переключитьframeСодержание;
При необходимостиframeПараметры передаются обратно в родительское окно, которое можно найти вframeиспользуется вparentключевое слово для доступа к родительскому окну.

15. Метод делегирования событий

Описание проблемы: В IE используйтеdocument.body.onload = inject;, вfunction inject()Это было реализовано раньше; в Firefox используйтеdocument.body.onload = inject();
Решение: унифицированное использованиеdocument.body.onload=new Function("inject()"); илиdocument.body.onload = function(){}
[Уведомление]Functionа такжеfunctionразница

16. ИспользованиеsetAttributeустановить событие

var obj = document.getElementById("objId");
obj.setAttribute("onclick", "funcitonname()");

Поддержка FireFox, IE не поддерживает.
Решение: В IE вы должны использовать точечную нотацию для ссылки на требуемый обработчик событий и назначить его анонимной функции следующим образом:

var obj = document.getElementById("objId");
obj.onclic k= function(){ fucntionname(); };

Этот метод поддерживается всеми браузерами

17. Разница между доступом к родительским элементам

Описание проблемы: В IE используйтеobj.parentElementилиobj.parentNodeдоступobjРодительский узел ; в FireFox используйтеobj.parentNodeдоступobjродительский узел.
Решение: Поскольку и FireFox, и IE поддерживают модель DOM, используйте ее единообразно.obj.parentNodeпосетитьobjродительский узел.

18.innerTextЭта проблема.

Описание проблемы:innerTextотлично работает в IE, ноinnerTextНе в Фаерфоксе.
Решение: использовать в браузерах, отличных от IEtextContentзаменятьinnerText.
Пример:

if (navigator.appName.indexOf("Explorer") > -1) {
  document.getElementById("element").innerText = "my text";
} else {
  document.getElementById("element").textContent = "my text";
}

[Примечание]innerHTMLВ то же время он поддерживается такими браузерами, как IE и FireFox.Другие, такие какouterHTMLПоддерживается только IE, лучше не использовать.

19.TableОперационные проблемы

Описание проблемы: IE, FireFox и другие браузеры неtableРабота тегов отличается, в IE не разрешеноtableа такжеtrизinnerHTMLНазначение, используйте js, чтобы добавить одинtrкогда используешьappendChildметод тоже не работает.document.appendChildFireFox поддерживает вставку строк в таблицы, IE — нет.
Решение: вставьте строку вtbody, не вставляйте непосредственно в таблицу Обходной путь:

// 向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td"); 
cell.innerHTML = "";
cell.className = "XXXX"; 
row.appendChild(cell);

[Примечание] Для работы рекомендуется использовать набор фреймов JS.table, например JQuery.

20. Проблема назначения ширины и высоты объекта

Описание проблемы: Аналогично FireFox.obj.style.height = imgObj.heightзаявление недействительно.
Решение: унифицированное использованиеobj.style.height = imgObj.height + "px";

двадцать один,setAttribute("style", "color: red;")

Поддержка FireFox (кроме IE, который сейчас поддерживается всеми браузерами), IE не поддерживает
Решение: нетsetAttribute("style", "color : red;")
и использоватьobject.style.cssText = "color: red;"(Есть исключения из этого написания)
Лучший способ - использовать все вышеперечисленные методы, надежные

22. Настройки имени классаsetAttribute("class", "styleClass")

Поддержка FireFox, IE не поддерживает (указанное имя свойстваclass, IE не будет устанавливатьclassсвойство, вместо этого просто используйтеsetAttributeIE автоматически распознаетclassnameАтрибуты)
решение:
setAttribute("class", "styleClass")
setAttribute("className", "styleClass")
или напрямуюobject.className= "styleClass";
Поддержка IE и FFobject.className.

23. Создайте радиокнопки

// IE以外的浏览器
var rdo = document.createElement("input");
rdo.setAttribute("type", "radio"); 
rdo.setAttribute("name", "radiobtn"); 
rdo.setAttribute("value", "checked");
// IE
var rdo = document.createElement("<input name="radiobtn" type="radio" value="checked" />");

решение:
Это отличие отличается от предыдущих. На этот раз все совсем по-другому, поэтому я не могу найти общего решения для ее решения, тогда толькоIF-ELSEохватывать
К счастью, IE можно идентифицироватьdocumentизuniqueIDатрибут, который не распознается другими браузерами. задача решена.
​

5. CSS-совместимость

1,CSS Hack 

использоватьhackerБраузеры можно разделить на 3 категории: IE6, IE7 и Safari, остальные (IE8, Chrome, Safari, Opera и т.
(1) Известно IE6hackerподчеркивание_и звездочка* 
(2) IE7 и Aoyou знают друг другаhackerэто звездочка* 
Такие как:height:300px;*height:200px;_height:100px; 
(1) Браузер IE6 читаетheight:300pxкогда считается пора300px 
Читайте дальше, он тоже знает*heihgt, поэтому, когда IE6 читает*height:200pxКогда конфликтующие настройки предыдущего элемента перезаписываются, высота считается200px.
Читайте дальше, IE6 тоже знает_height, поэтому он снова перезаписывает200pxвысокая настройка, установите высоту на100px.
(2) IE7 и роуминг одинаковы с высоты300pxНастройки читайте ниже. когда они читают*height:200pxостановились, когда они не знали друг друга_height.
Таким образом, они разрешат высоту как200px, остальные браузеры распознают только первыйheight:300px ;
Таким образом, они будут анализировать высоту как300px. Порядок записи очень важен, потому что последний атрибут, установленный с таким же приоритетом и конфликтующий, перезапишет предыдущий.

2. Стили CSS совместимы с разными браузерами

Общие для всех браузеров:height: 100px; 
Только для IE6:_height: 100px; или*height: 100px; 
Только для IE7:*+height: 100px; 
Совместно с IE7 и FF:height: 100px !important; 
Следующие два метода могут решить почти всю совместимость сегодня:
(1)!important 
С парой IE7!important служба поддержки,!important Метод теперь совместим только с IE6 (обратите внимание на способ написания, помните, что позицию объявления нужно продвигать)

.box {
  width: 100px !important; /* IE7+FF */
  width: 80px; /* IE6 */
}

(2) IE6/IE77 в FireFox
*+html а также*html- это тег, специфичный для IE, который в настоящее время не поддерживается FireFox. а также*+htmlЭто также специальный тег IE7.

.box { width: 120px; } /* FireFox */
*html .box { width: 80px;} /* ie6 fixed */
*+html .box { width: 60px;} /* ie7 fixed, 注意顺序 */

3. УниверсальныйfloatЗакрытие (очень важно) может использоваться для решения несколькихdivНеправильный интервал при выравнивании

Добавьте следующий кодGlobal CSS, для тех, что нужно закрытьdivплюсclass="clearfix"Вот и все, проверено.
Код:

<style>
/* Clear Fix */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
/* Hide from IE Mac \*/
.clearfix {
    display:block;
}
/* End hide from IE Mac */
/* end of clearfix */
</style>

4. Другие навыки совместимости

  1. Firefox даетdiv настраиватьpaddingвызоветwidth а такжеheightувеличивается, а IE нет (доступно!important решить)
  2. Проблема с центрированием:
    1. вертикальный центрline-heightустановить на текущийdivтой же высоты, затем пройтиvetical-align: middle(Будьте осторожны, чтобы не обернуть содержимое)
    2. Центрировать по горизонтали:margin: 0 auto;(конечно не все)
  3. Если вам нужно датьaСодержимое тега плюс стиль необходимо установитьdisplay: block;(обычно во вкладках навигации)
  4. Различия в понимании BOX в Firefox и IE приводят к различиям2pxТакже установлен наfloat изdivпод т.е.marginУдвоение и др.
  5. ulЯрлыки по умолчанию ниже FFlist-style а такжеpaddingЛучше объявить об этом заранее, чтобы избежать ненужных хлопот (обычно во вкладках навигации и списках контента).
  6. как внешнийwrapper изdivНе устанавливайте мертвую высоту, лучше добавьтеoverflow: hiddenбыть высоко адаптивным

5. Совместимый код: Совместим с наиболее рекомендуемым режимом.

/* FF */
.submitbutton {
    float: left;
    width: 40px;
    height: 57px;
    margin-top: 24px;
    margin-right: 12px;
}
/* IE6 */
*html .submitbutton {
    margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
    margin-top: 21px;
}

6. СовместимостьCSSметод

Способ сделать совместимую страницу таков: каждый раз, когда мы пишем небольшой фрагмент кода (строку или блок в макете), мы должны проверять, совместим ли он в разных браузерах.Конечно, это не так хлопотно определенную степень.
Рекомендуется для начинающих пользователей, которые часто встречаются с проблемами совместимости. Многие проблемы совместимости вызваны различными браузерами, интерпретирующими атрибуты по умолчанию тегов. Эти проблемы совместимости могут быть легко решены, если мы устанавливаем немного.
Если мы знакомы со свойствами тегов по умолчанию, мы можем понять, почему возникают проблемы совместимости и как их решить.

6. Другая совместимость с CSS

1. Вкладки по умолчанию в разных браузерахmargin а такжеpadding разные

Описание проблемы: Написать несколько тегов по желанию, не добавляя управление стилями, соответствующиеmargin а такжеpaddingбольшие разные.
решение:CSS: *{margin: 0;padding:0;} 

2. Теги атрибутов блокировкиfloatПозже происходят массовыеmarginслучай, в отображении IE6marginбольше, чем набор

Описание проблемы: общий симптом заключается в том, что последний блок в IE6 перемещается на следующую строку (floatмакет для наиболее распространенных проблем совместимости браузера)
Решение: вfloatдобавлено в элемент управления стилем меткиdisplay:inline;Преобразуйте его во встроенный атрибут
Примечание. Чаще всего используетсяdiv+CSSвыкладывается, иdivЭто типичный тег свойств блока, который мы обычно используем в альбомной ориентации.div floatРеализовано, если интервал по горизонтали задан с помощьюmarginРеализация, это проблема совместимости, с которой неизбежно придется столкнуться.

3. Этикетки меньшей высоты (обычно менее10px )вопрос

Описание проблемы: Высота этой метки в IE6, 7 и роуминге не контролируется и превышает высоту, установленную вами
Решение: установить метки, которые превышают высотуoverflow:hidden;Или установить высоту строкиline-heightменьше установленной высоты.
Примечание. Такая ситуация обычно возникает в этикетке, где мы устанавливаем фон из небольших закругленных углов. Причина этой проблемы в том, что браузеры до IE8 давали метке минимальную высоту строки по умолчанию. Даже если ваша метка пуста, высота метки все равно будет соответствовать высоте строки по умолчанию.

4. Метка встроенного атрибута, установкаdisplay:blockпринят позжеfloatкомпоновка и безудержноеmarginВ случае интервала IE6bug 

Описание проблемы: коэффициент интервала в IE6 превышает установленный интервал
Решение: вdisplay:block;присоединиться позжеdisplay:inline;display:table; 
Примечание. Теги встроенных атрибутов, чтобы установить ширину и высоту, нам нужно установитьdisplay:block; (Кромеinputтеги специальные).
С использованиемfloatрасположение и иметь горизонтальноеmarginПосле этого под IE6 у него есть атрибут блокаfloatБоковой пейзажmargin изbug.
Однако, поскольку он сам по себе является встроенным тегом атрибута, мы добавляемdisplay:inlineЕсли это так, его высота и ширина не могут быть установлены.
В это время нам также необходимоdisplay:inlineприсоединиться позжеdisplay:talbe.

5. Картинки имеют интервал по умолчанию

Описание проблемы: несколькоimgКогда теги объединены, некоторые браузеры будут использовать интервал по умолчанию, и добавление подстановочных знаков, упомянутых в вопросе 1, не будет работать.
Решение: использоватьfloatсобственностьimgмакет
Примечание: потому чтоimgМетка является встроенной меткой атрибута, поэтому, если она не превышает ширину контейнера,imgтеги будут располагаться в одну строку, но некоторые браузерыimgМежду метками будет пробел. Чтобы удалить этот интервал, используйтеfloatэто правильный путь.

6. Настройка минимальной высоты этикеткиmin-heightне совместимы

Описание проблемы: Потому чтоmin-heightсам по себе несовместимCSSсвойство, поэтому установитеmin-heightплохо совместим с различными браузерами
Решение: Если мы хотим установить минимальную высоту метки200px, необходимо выполнить следующие настройки:

{ 
  min-height: 200px; 
  height: auto !important; 
  height: 200px; 
  overflow:visible;
 }

Примечания: Когда внешний интерфейс системы B/S открыт, во многих случаях у нас есть это требование. Когда содержимое меньше значения (например,300px )Время. Высота контейнера составляет300px; Когда высота содержимого больше этого значения, вместо полос прокрутки растягивается высота контейнера. В это время мы столкнемся с этой проблемой совместимости.

7. Проблемы с центрированием в макете CSS

Описание проблемы: Сначала определите в родительском элементеtext-align: center;Это означает, что содержимое родительского элемента располагается по центру; для IE этого параметра достаточно. Но это не может быть сосредоточено в Mozilla.
Решение: добавьте его при настройке определения дочернего элементаmargin-right: auto; margin-left: auto;  

8. Двойное расстояние, создаваемое плавающим IE

#box { 
  float: left; 
  width: 100px; 
  margin: 0 0 0 100px; // 这种情况之下IE会产生200px的距离
  display: inline; // 使浮动忽略
}

Позвольте мне уточнить здесьblock,inlineдва элемента
BlockХарактеристики элемента: он всегда начинается с новой строки, и можно контролировать высоту, ширину, высоту строки и поля (блочный элемент).
InlineХарактеристики элемента: на одной линии с другими элементами, неуправляемый (встроенные элементы)

#box { 
  display: block; // 可以为内嵌元素模拟为块元素 
  display: inline; // 实现同一行排列的的效果 
  diplay: table;
}

9, IE и проблемы с шириной и высотой

IE его не распознаетmin-это определение, но на самом деле оно ставит нормальноеwidth а такжеheightсчитается имеющимminситуация для использования.
Это большая проблема.Если вы используете только ширину и высоту, эти два значения не изменятся в обычных браузерах.Если вы используете только ширину и высотуmin-width а такжеmin-heightЕсли это так, IE эквивалентен тому, что вообще не устанавливает ширину и высоту.
Например, для установки фонового изображения ширина важнее.
Решение: Чтобы решить эту проблему, вы можете сделать это:

#box { 
  width: 80px; 
  height: 35px;
}
html>body #box {
  width: auto; 
  height: auto; 
  min-width: 80px; 
  min-height: 35px;
}

10. Минимальная ширина страницы

min-widthэто очень удобноCSSкоманда, она может указать, что размер элемента не меньше определенной ширины, чтобы компоновка всегда была правильной.
Но IE этого не распознает и фактически помещаетwidthИспользуйте его как минимальную ширину.
Чтобы эта команда работала и в IE, вы можете поместить<div>помещать<body>вкладка, затем дляdivукажите класс, затемCSSДизайн такой:

#containe r{
    min-width: 600px;
    width: e-xpression(document.body.clientWidth < 600? "600px": "auto");
}

Первыйmin-width это нормально;
но строка 2width использовалJavaScript, это распознается только IE, что также сделает вашHTMLДокументация не формальная. на самом деле проходитJavaScriptдля достижения минимальной ширины.

11. Очистить поплавок

.box {
  display: table;
  // 将对象作为块元素级的表格显示
}
// 或者
.box {
  clear: both;
}

или присоединиться:after(псевдообъект), устанавливает, что происходит после объекта, обычно иcontentПри совместном использовании IE не поддерживает этот псевдообъект,
Поддержка браузера, отличного от IE, поэтому это не влияет на браузер IE/WIN.

……#box:after {
  content: “.”;
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

12.DIVГенерация плавающего текста IE3px изbug 

Объект слева является плавающим, правая сторона располагается по левому краю внешнего патча, а текст в объекте справа будет отделен от левого.3px Подача.

#box {
  float: left;
  width: 800px;
}
#left {
  float: left;
  width: 50%;
}
#right {
  width: 50%;
}
*html #left {
  margin-right: -3px; // 这句是关键
}

13. Проблема IE в прятки

когдаdivКогда приложение сложное, в каждом столбце есть несколько ссылок,divВ это время легко возникает проблема пряток.
Некоторый контент не может быть отображен. Когда мышь выбирает эту область, обнаруживается, что контент действительно находится на странице.
Решение: да#layout использоватьline-heightатрибутировать или дать#layoutИспользуйте фиксированную высоту и ширину. Структура страницы должна быть максимально простой.

14. Рост не подходит

Несовместимость по высоте заключается в том, что при изменении высоты объекта внутреннего слоя высота внешнего слоя не может регулироваться автоматически, особенно когда объект внутреннего слоя используетmargin илиpadding Время. пример:

<div id=”box”>
	<p>p对象中的内容</p>
</div>

CSS:

#box {
  background-color: #eee; 
}
#box p {
  margin-top: 20px;
  margin-bottom: 20px; 
  text-align: center; 
}

Решение: вpДобавляйте объекты вверх и вниз2пустойdivобъектCSSКод:.1{ height: 0px; overflow: hidden; }или дляDIVплюсborderАтрибуты.

15.cursorпроблема собственности

cursor: hand; VS cursor: pointer; 
Описание проблемы: FireFox не поддерживаетhand, но IE поддерживаетpointer.
Решение: унифицированное использованиеpointer.

16. Анализ блочной модели противоречив.

  • правильноborderРазбор несовместим, например:box.style { width: 100px; border: 1px; }; IE понимает это какbox.width = 100px;; Firefox интерпретирует это какbox.width = 100 + 1*2 = 102px;  // 加上边框2px

решение:div { margin: 30px !important; margin: 28px; }Обратите внимание на эти дваmarginПорядок не должен быть обратным, IE не может распознать!importantЭтот атрибут распознается другими браузерами. Так что на самом деле это интерпретируется как это в IE:div{ maring: 30px; margin: 28px; }Быть выполненным в последнем повторном определении, он не может просто написатьmargin: XXpx !important;

  • Интерпретация блочной модели IE5 и IE6 противоречива. В IE5div{ width: 300px; margin: 0 10px 0 10px; }вdivШирина интерпретируется как300px-10px(右填充)-10px(左填充), наконецdivширина280px, тогда как в IE6 и других браузерах ширина равна300px+10px(右填充)+10px(左填充)=320pxвычислять.

Решение: внесите следующие измененияdiv { width: 300px !important; width /**/: 340px; margin: 0 10px 0 10px; }
17.ulа такжеolПроблема с отступом в списке
ликвидироватьul,olКогда список имеет отступ, стиль должен быть записан как:list-style: none; margin: 0px; padding: 0px;
Проверил, что в IE установилmargin: 0px;Вы можете удалить верхний, нижний, левый и правый отступы, пробелы и номера или точки списка.paddingне влияет на стили;
В Firefox установитеmargin: 0px;Можно только убрать верхние и нижние болванки, установитьpadding: 0px;После этого можно убрать только левый и правый отступы, также необходимо установитьlist- style: none;чтобы удалить номера списка или точки. То есть в IE просто установилmargin: 0px;для достижения конечного эффекта, в то время как в Firefox вы должны установить обаmargin: 0px;,padding: 0px;так же какlist-style: none;Три для достижения конечного эффекта.

17. Почему нельзя определить1pxлевый и правый контейнеры высоты

Эта проблема под IE6 заключается в том, что строка по умолчанию вызвана; есть много навыков:
Например:overflow: hidden; zoom: 0.08 line-height: 1px;

18. Ссылка (aметка) граница и фон

aСсылка с рамкой и цветом фона, необходимо установитьdisplay: block;установить в то же времяfloat: left;Гарантированно не завернуть. Ссылаться наmenubar, Датьaа такжеmenubarВысота задается во избежание смещения нижнего края, если не заданаheight, допустимыйmenubarВставьте пробел.
19. После доступа к гиперссылкеhoverПроблема стиля не возникает
Описание проблемы: стиль гиперссылки, по которой вы щелкнули и посетили, больше не имеетhoverа такжеactiveохватывать
Решение состоит в том, чтобы изменить порядок свойств CSS: L-V-H-A ;
<style type="text/css"> <!-- a:link {} a:visited {} a:hover {} a:active {} --> </style>

Категории