web-dev-qa-db-ja.com

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

htmlinternet-explorer-9html-lists
33
Rkstarcass

2012年3月20日更新-IE10で修正

このリグレッションは、Internet Explorer 10（すべてのドキュメントモード）で修正されています。 MicrosoftはConnectエントリを削除したため、そのステータスを確認することはできません。 MicrosoftはIE10を自動的にプッシュダウンするようになったため、すべての常連客に機能するはずです。

これは既知のIE9リグレッションであり、MicrosoftConnectで報告されています。

順序付きリストの番号が正しいから0、0に変わります

タイプ：バグ
[〜＃〜] id [〜＃〜]：657695
オープン：2011年4月6日12:10:52 PM
アクセス制限：公開

回避策
5ユーザーはこのバグを再現できます

更新：

Microsoftによって2011年6月14日午後3時20分に投稿
ご意見ありがとうございます。

問題を再現することができ、調査中です。

宜しくお願いします、

InternetExplorerチーム

バグを再現する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）：動作します

27
Ian Boyd

別の解決策:)

  1. 要素を表示します。

     el.show（）;

  2. 次に：

     setTimeout（function（）{
 $（ "ol"）。css（ "counter-reset"、 "item"）
}、1）;
7
no81no

空のdiv回避策は私にはうまくいきませんでした。これがトリックを行ったいくつかの簡単なjQueryです。

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

これは、特定のシナリオ、特にAJAXを含むシナリオではバグのようです。この記事では、再現するための手順を実行しますが、解決策は示していません。

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

記事は中国語であることに注意してください。 Chromeで翻訳しました。

これはworkingフィドルで、問題なくリストを動的に更新できることを示しています。

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

残念ながら、AJAX/IE9 /順序付きリストを組み合わせる必要がある場合、これは問題を修正しません。これは、OPがSharePointを使用している場合におそらく当てはまります。

この問題に自分で数時間を費やした後、（SharePointの外で）これがWindows7のIE 9.0.8112）で間違いなく問題であることを確認できます。CSSにも影響を与えるようですcounter-increment順序付きリストを実装するための方法論（つまり、機能しません。リスト項目にはすべてゼロの番号が付けられます）。

「対処する」/「AJAXを削除する」よりも良い解決策を見つけたら、回答を更新します。

編集：これが私の「より良い答え」です。

このコードは予備テストのみを受けており、AJAXクライアント側APIにフックする必要があります。他のバージョンのIE、または他のブラウザーで破損する可能性があります。自己責任で使用してください。

とは言うものの、IE9で（start属性を介して）暗黙的および明示的な開始番号が定義されたすべてのゼロを表示する順序付きリストの動作を修正します。 start属性はHTML5で非推奨ではなくなったことに注意してください。

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が明示的に割り当てられます。

これにより、再描画が強制され、前述の注意事項とともに、問題が修正されます。

2
Tim Medora

まず、CSSだけでこのバグを確認することができます。これは、<ol>が非表示および表示されるたびに発生します。 バグを示すjsfiddleの例

また、状況によってはCSSだけでバグを修正することも可能です。修正には一貫性がありますが、コードはデリケートで、最も優れているわけではありません。ここでは、すべきではないCSSに違いをもたらすことがたくさんあるので、慎重にコーディングしてください。 動作するjsfiddleの例 。基本的な考え方は、リストの代わりに行を切り替えてから、（表示されているが空の場合もある）counter-resetの<ol>とcounter-incrementの<li>でリスト番号を再作成することです。

利点：ここにあるものはすべて、IE専用のスタイルシートに収めることができます。 :hoverが意味をなさず、jQuery .show()のようなものを使用する場合は、代わりに.addClass()に基づくものを検討してください。

クラスの追加について言えば、このバグがまだ十分に奇妙ではなかったかのように、最初の例のような条件では、IE）の<ol>sworkのようですJavascriptがラッパー要素にクラスを追加する場合-クラスが何もしない場合でも これはjsfiddleの例です 。他の場所で機能することを保証できません。しかし、それはここで機能します。

バグを理解しようとしている場合は、a）幸運、b） ここでこのjsfiddleを見てください 。これは、CSS counterオプション（および通常の番号付け）を実行した場合に発生しますが、<ol>sではなく<li>sを切り替えます。前の兄弟、次の兄弟、またはどちらからマウスオーバーしたかによって、表示される内容が完全に異なるというクレイジーな状況になります。意味がありません...しかし、それはおそらくこのバグが実際に何を意味するのかについての手がかりです。

また、番号がすべて1、すべて2、すべて3など、どの<ol>であるかに応じて、複製できない状況があります。ページの最初のコードが1,1,1,1,1、2番目のコードになります。 2,2,2,2,2、次に3,3,3,3,3などになります。その癖の原因を特定することはできません。

1
user568458

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

私はそのコードを使用していました。しかし、私はまだゼロを得ていました。問題のあるものの後に別のOLを追加し、その後すぐに非表示にするように変更しました。

「windows_instructions」は、ゼロを修正するOLです。「ie_fix」はダミーですOL非表示です。2ミリ秒を使用してみました2回目のタイムアウトですが、十分な時間ではありませんでした。ajaxコンテンツがフェードインしているため、100ミリ秒でFOUCを取得できません。

将来の修正に役立つ場合、問題は常にページの最後のOLにあるようです。

コードは次のとおりです。

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

私は最近この問題に自分で遭遇し、空のdivを含めるのとは異なる解決策を思いつきました。さまざまなシナリオで間違いなくより多くのテストを使用できますが、リストが非表示になって再び表示された場合でも、これは私にとってはうまくいきました。

var ieTimeout;
var selectorWrapperSet = $(selector);

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

スタイルシートに次のマークアップスニペットが必要になる可能性があります-

ol {list-style:decimal}

これは、スタイルシートでまだ宣言していない場合に希望する順序付きリストのタイプを宣言します。

0
breezy

スクリーンショットから、SharePointを使用しているように見えます。 SharePointに既存のCSS設定が原因でCSSの干渉が発生していると思います。

テストとして、olスタイルをインラインで宣言してみて、それが役立つかどうかを確認してください。

<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>
0
NakedBrunch

Windows 10のEdgeでも同様の問題が発生しました。これは、cssトランジションを使用して開いたモバイルメニュー内のリストアイテムの横に0が表示されていました。リストスタイルの100のバリエーションを試したように感じました。およびlist-style-type：none; ol、その親と子孫に。

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
Jeremy Tarpley

番号付けの問題は、非表示の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");
    }
}

この問題は、JavaScriptを介してdisplayプロパティを設定することでも解決できます。

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

私の場合、hiddenプロパティを直接操作するのではなく、ol要素を含む要素（IE9互換性のために[hidden] { display: none; }を使用）のHTML5 display属性を削除および追加することでリストを表示および非表示にしていたため、この問題が発生しました。

0
Patrick Dark