Подтвердить что ты не робот

Упорядоченный список, показывающий все нули в IE9

У меня есть <ol> (упорядоченный список), а в FF, Safari, Chrome он отображается правильно. Однако в IE9 он показывает все нули. Это не проблема с интервалом/заполнением, потому что я могу видеть нули.

Мой HTML выглядит следующим образом:

<ol> 
    <li>Enter basic company information</li> 
    <li>Select from our portfolio of products</li> 
    <li>Attach your employee census</li> 
    <li>Review your selections and submit your request.</li> 
</ol>

Кто-нибудь сталкивается с этой проблемой и, надеюсь, является решением?

ol issues

4b9b3361

ОТВЕТЫ

Ответ 1

Обновление 3/20/2012 - Исправлено в IE10

Эта регрессия исправлена ​​в Internet Explorer 10 (все режимы документа). Microsoft удалила запись Connect, поэтому вы не можете просмотреть ее статус. Поскольку Microsoft теперь автоматически отключает IE10, она должна работать для всех ваших постоянных клиентов.

Это известная регрессия IE9, о которой сообщается в Microsoft Connect:

Изменения нумерации упорядоченных списков от правильного до 0, 0

Тип: ошибка
ID: 657695
Открыто: 4/6/2011 12:10:52 PM
Ограничение доступа: общедоступное

0 Временное решение
5 Пользователь может воспроизвести эту ошибку

Update:

Отправлено Microsoft от 14.06.2011 в 15:20

Спасибо за ваш отзыв.

Мы смогли воспроизвести проблему и расследуем ее.

С уважением,

Команда Internet Explorer

HTML-страница, которая воспроизводит ошибку:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>IE9 Ordered List Zero Bug</TITLE>
<SCRIPT type="text/javascript">
    setTimeout(function ()
        {
            document.getElementById("dv1").innerHTML = "<ol><li>XXX</li><li>YYY</li></ol>";
            var container = document.createElement('span');
            container.style.cssText = "display:none";
            document.getElementById("dv2").appendChild(container);
        }, 1000);
</SCRIPT>
</HEAD>
<BODY>

<DIV id="dv1">
    <OL>
    <LI>AAA</LI>
    <LI>BBB</LI>
    </OL>
</DIV>

<DIV id="dv2"></DIV>

</BODY>
</HTML>

Обходной путь заключается в том, чтобы поместить пустой элемент после DIV:

<div id="one">
   <ol>
      <li>one</li>
      <li>two</li>
   </ol>
</div>
<div id="two" style="display:none">
   <ol>
      <li>three</li>
      <li>four</li>
   </ol>
</div>
<div id="empty"></div>

Браузеры, отображающие ошибку

Internet Explorer 9 (9.0.8112.16421)

  • Режим работы с документами: работает
  • Стандарты документа IE7: Работы
  • Стандарты IE8 в режиме документа: Сбой
  • Стандарты IE9 в режиме документа: Сбой

Internet Explorer 8 (8.0.6001.19048)

  • Режим работы с документами: работает
  • Стандарты документа IE7: Работы
  • Стандарты документа IE8: Работы

Internet Explorer 7 (7.0.6000.16982): Работает

Google Chrome 10 (10.0.648.134): Работает

Ответ 2

Другое решение:)

  • Показать элемент:

         el.show();

  • Тогда:

     setTimeout(function(){
        $("ol").css("counter-reset", "item")
 }, 1);

Ответ 3

Пустой обходной путь div не работал у меня. Вот несколько простых jQuery, которые сделали трюк.

// Workaround for IE list display bug
$('ol').hide().delay(1).show();

Ответ 4

Это, по-видимому, ошибка в определенных сценариях, особенно в тех, которые связаны с AJAX. Эта статья проходит через шаги для воспроизведения, но не дает никакого разрешения:

http://blog.darkthread.net/post-2011-03-19-ie9-ol-bug.aspx

Обратите внимание, что статья находится на китайском языке; Я перевел его с помощью Chrome.

Вот скрипт рабочая, который показывает, что можно динамически обновлять список без проблем:

http://jsfiddle.net/6tr9p/18/

К сожалению, это не устраняет проблему, когда есть необходимость комбинировать AJAX/IE9/упорядоченные списки, что, вероятно, имеет место, если OP использует SharePoint.

После того, как я потратил несколько часов на эту проблему самостоятельно, я могу подтвердить, что (за пределами SharePoint) это определенно проблема в IE 9.0.8112 в Windows 7. Она также оказывает влияние на методологию CSS counter-increment для реализации упорядоченных списков (т.е. он не работает, элементы списка все равно нумеруются).

Я обновлю свой ответ, если найду лучшее решение, чем "справиться с ним" / "удалить AJAX".

EDIT: Вот мой "лучший ответ".

Этот код получил только предварительное тестирование и включает подключение к API-интерфейсу AJAX на стороне клиента. Он может ломаться в других версиях IE или в других браузерах. Используйте на свой страх и риск.

Тем не менее, он исправляет поведение упорядоченных списков, отображающих все нули в IE9 с указанием как неявных, так и явных начальных чисел (через атрибут start). Обратите внимание, что атрибут start больше не устарел в HTML 5.

function endRequest_OL_Fix(sender, args) {
    var ols = document.getElementsByTagName("ol");

    for (var i = 0; i < ols.length; i++) 
    {
        var explicitStart = ols[i].start;

        if (explicitStart > 0) {
            ols[i].start = -1;
            ols[i].start = explicitStart;
        }
        else {
            ols[i].start = 1;
        }
    }
}

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest_OL_Fix);

После завершения запроса (включая асинхронный запрос) проверяются все теги OL на странице. Если они имеют явно определенный атрибут start, он будет сохранен, reset и переназначен. В противном случае start будет явно назначено.

Это заставляет перерисовать и - с вышеупомянутыми оговорками - устраняет проблему.

Ответ 5

Недавно я столкнулся с этой проблемой и придумал другое решение, не считая пустого div. Мог бы определенно использовать больше тестов в разных сценариях, но это сработало для меня, даже когда список был скрыт и снова показан.

var ieTimeout;
var selectorWrapperSet = $(selector);

selectorWrapperSet.css("display","none");
ieTimeout = setTimeout(function() {
selectorWrapperSet.css("display","block");
}, 1);

Ответ 6

@Alex Kleshchevnikov - http://choosedaily.com/2481/ie9-bug-ordered-list-zeroes-ajax-request/

Я использовал этот код; но я все еще получал нуль. Я изменил его, чтобы добавить еще один OL после оскорбительного, а затем скрыть его вскоре после этого.

"windows_instructions" - это OL, для которого я фиксирую нуль. "ie_fix" - это фиктивный OL, который я скрываю. Я пытался использовать 2 мс в качестве второго тайм-аута; но времени было недостаточно. Поскольку мое содержание ajax исчезает, я не получаю FOUC со 100 мс.

Если это полезно для будущих исправлений, похоже, проблема всегда связана с последним OL на странице.

Здесь код:

if($("#windows_instructions").length>0)
    {
        $("#windows_instructions").hide();
        ieTimeout = setTimeout(function() 
        {    
            $("#windows_instructions").show();
        }, 1);
        ieTimeout = setTimeout(function() 
        {    
            $("#ie_fix").hide();
        }, 100);
    }

Ответ 7

Во-первых, можно увидеть эту ошибку только с CSS. Это происходит в любое время, когда <ol> скрывается и отображается. Пример jsfiddle, который показывает ошибку.

Кроме того, можно исправить ошибку с помощью CSS только в некоторых случаях. Исправление является непротиворечивым, но код деликатный и не самый приятный. Множество вещей, которые не должны иметь никакого значения в CSS, здесь, поэтому тщательно проконтролируйте его. Пример jsfiddle, который работает.. Основная идея: переключение строки вместо списка, а затем повторное создание нумерации списков с помощью counter-reset на (видимом, но иногда пустом) <ol> и counter-increment на <li>.

Преимущество: все здесь можно убрать внутри таблицы стилей только для IE. Если :hover не имеет смысла в вашем случае, и вы используете что-то вроде jQuery .show(), вместо этого рассмотрите что-то, основанное на .addClass().

Говоря о добавлении классов, как будто эта ошибка уже не была достаточно странной, кажется, что <ol> работает в IE в таких условиях, как первый пример, если Javascript добавляет класс в элемент оболочки - даже если класс doesn ' ничего не делай. Вот пример jsfiddle. Не могу гарантировать, что это будет работать в другом месте, но оно работает здесь.

Если вы пытаетесь понять ошибку, а) удачи, и b) взгляните на этот jsfiddle здесь. Это произойдет, если вы выполните опцию CSS counter (плюс регулярную нумерацию), но переключитесь на <ol> не на <li> s. Вы получаете сумасшедшую ситуацию, когда показанное полностью отличается в зависимости от того, нажимаете ли вы мыши от предыдущего брата, следующего брата или другого. Не имеет смысла... но это, вероятно, подсказка о том, что на самом деле означает эта ошибка.

У меня также есть ситуация, в которой я не могу реплицировать, где нумерация - все 1s, все 2s, все 3s и т.д., в зависимости от которой <ol> это: первая на странице становится 1,1,1,1, 1, второй становится 2,2,2,2,2, затем 3,3,3,3,3 и т.д. Невозможно выделить причины, вызывающие эту причуду.

Ответ 8

На скриншоте похоже, что вы используете SharePoint. Я предполагаю, что есть некоторые CSS-помехи, возникающие в результате использования настроек CSS в SharePoint.

В качестве теста попробуйте объявить свой стиль inline inline и посмотреть, помогает ли он.

<ol style="list-style-type:decimal;"> 
    <li>Enter basic company information</li> 
    <li>Select from our portfolio of products</li> 
    <li>Attach your employee census</li> 
    <li>Review your selections and submit your request.</li> 
</ol>

Ответ 9

Вероятно, вам понадобится следующий фрагмент разметки в вашей таблице стилей -

ol {list-style:decimal}

Что это означает, объявляет тип упорядоченного списка, который вы предпочитаете, если вы еще не объявили его в своей таблице стилей.

Ответ 10

Проблема с нумерацией возникает после обнаружения скрытого элемента ol и может быть устранена путем изменения или добавления атрибута класса к элементу, содержащему элемент ol через JavaScript после того, как элемент ol был обнаружен. Следующий код делает это таким образом, который не модифицирует существующие атрибуты класса каким-либо существенным образом, не оставляет в DOM пустой атрибут класса, не требует jQuery и позволяет только браузеры Trident 5.0 (например, IE9) для выполнения кода:

if (/Trident\/5.0/.test(navigator.userAgent)) { // Windows Internet Explorer 9 Bug Fix
    // Official Bug Report: https://connect.microsoft.com/IE/feedback/details/657695/ordered-list-numbering-changes-from-correct-to-0-0
    // Bug Fix: http://stackoverflow.com/questions/5584500/ordered-list-showing-all-zeros-in-ie9
    if (listContainerElement.hasAttribute("class")) {
        listContainerElement.setAttribute("class", listContainerElement.getAttribute("class"));
    }
    else {
        listContainerElement.setAttribute("class", "");
        listContainerElement.removeAttribute("class");
    }
}

Проблема также может быть решена путем установки свойства display с помощью JavaScript:

listContainerElement.style.setProperty("display", someDisplayPropertyValue);

В моем случае я показывал и скрывал список, удаляя и добавляя атрибут HTML5 hidden для элемента, содержащего элемент ol (с [hidden] { display: none; } для совместимости с IE9), а не напрямую манипулируя свойством display поэтому я столкнулся с этой проблемой.

Ответ 11

Имел аналогичную проблему с Edge в Windows 10. Он показывал 0 с рядом с элементами списка в мобильном меню, которое открывалось с использованием перехода css. Почувствовал, как я попробовал сотню вариантов списка-стиля: нет; и list-style-type: none; на оле, его родителях и потомках.

Завершилось это, чтобы исправить его в Edge/IE, но не путайте с стилем, который работал для каждого другого настольного и мобильного браузера:

/*
  Hack for Edge browser. Some things never change...
  This is definitely dirty, hacky and overkill.
  Without this, Edge on windows 10 shows a 0. next to every list item in a mobile menu that is animated with a css transition on our site.
  Using technique for targeting Edge from https://stackoverflow.com/info/32201586/how-to-identify-microsoft-edge-browser-via-css
  Answer by KittMedia: https://stackoverflow.com/a/32202953/
*/
@supports (-ms-ime-align: auto) {
  .element-im-targeting ol,
  .element-im-targeting ol li,
  .element-im-targeting ol * {
    list-style: none;
    list-style-type: none;
  }
}