Упорядоченный список, показывающий все нули в IE9 - PullRequest
33 голосов
/ 07 апреля 2011

У меня есть <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

Ответы [ 11 ]

27 голосов
/ 05 мая 2011

Обновление 20.03.2012 - Исправлено в IE10

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


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

Упорядоченная нумерация списка меняется с правильной на 0, 0

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

0 Обходное решение (я)
5 Пользователи могут воспроизвести эту ошибку


Обновление:

Автор: 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 Explorer8 (8.0.6001.19048)

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

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

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

7 голосов
/ 13 марта 2012

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

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

         el.show();
    
  2. Тогда:

     setTimeout(function(){
            $("ol").css("counter-reset", "item")
     }, 1);
    
3 голосов
/ 02 ноября 2011

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

// Workaround for IE list display bug
$('ol').hide().delay(1).show();
2 голосов
/ 22 мая 2011

Похоже, что это ошибка в определенных сценариях, особенно в тех, которые включают AJAX.В данной статье рассматриваются шаги по воспроизведению, но не дается никакого разрешения:

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

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

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

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

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

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

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

РЕДАКТИРОВАТЬ: Вот мой "лучше ответь ".

Этот код прошел только предварительное тестирование и включает в себя подключение к клиентскому 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, он будет сохранен, сброшен и переназначен.В противном случае будет явно назначено start.

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

1 голос
/ 02 января 2013

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

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

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

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


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


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

1 голос
/ 21 марта 2012

@ Алексей Клещевников - http://choosedaily.com/2481/ie9-bug-ordered-list-zeroes-ajax-request/

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

"windows_instructions" - это OL, для которого я исправляю нули."ie_fix" - это фиктивная ПР, которую я прячу.Я попытался использовать 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);
    }
1 голос
/ 10 сентября 2011

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

var ieTimeout;
var selectorWrapperSet = $(selector);

selectorWrapperSet.css("display","none");
ieTimeout = setTimeout(function() {
selectorWrapperSet.css("display","block");
}, 1);
0 голосов
/ 09 августа 2017

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

Закончилось этим, чтобы исправить это в 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/questions/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;
  }
}
0 голосов
/ 11 февраля 2014

Проблема нумерации возникает после обнаружения скрытого элемента 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: /7752631/uporyadochennyi-spisok-pokazyvayschii-vse-nuli-v-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, поэтому я столкнулся с этой проблемой.

0 голосов
/ 22 мая 2011

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

ol {list-style:decimal}

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

...