0

IE7 で特定の UL を表示する次のコードがあります。IE7 以外のすべてのブラウザーに他の UL スタイルを適用するにはどうすればよいですか? たとえば、chrome、firefox、および IE8 - IE10 に

<!--[if IE 7]>
        <ul class="toggle" style="margin-right:30px; list-style:none">
          @if (Model.CourseSections != null)
          {
            foreach (var sectionItem in Model.CourseSections)
            {                     
              <li>
                <h5 class="accordion-title">@sectionItem.Title<span class="accordion-icon"></span></h5>
                <div class="accordion-content">
                  <ul>
                    @foreach (var subSectionItem in sectionItem.SectionContents)
                    {
                      <li><a href="#" id="menuItem @subSectionItem.ContentID @sectionItem.CourseSectionID" onclick="SubItemMenu(id)">@subSectionItem.Content.Name</a></li> 
                    }
                  </ul>
                </div>
              </li>
            }
          }
        </ul>
        <![endif]-->

        <ul class="toggle" style="list-style:none">
          @if (Model.CourseSections != null)
          {
            foreach (var sectionItem in Model.CourseSections)
            {                     
              <li>
                <h5 class="accordion-title">@sectionItem.Title<span class="accordion-icon"></span></h5>
                <div class="accordion-content">
                  <ul>
                  @foreach (var subSectionItem in sectionItem.SectionContents)
                  {
                    <li><a href="#" id="menuItem @subSectionItem.ContentID @sectionItem.CourseSectionID" onclick="SubItemMenu(id)">@subSectionItem.Content.Name</a></li> 
                  }
                  </ul>
                </div>
              </li>
            }
          }
        </ul>
4

3 に答える 3

3

次のようなことができるはずです。

<!--[if IE 7]>
   You're using IE!
<![endif]-->
<!--[if !IE 7]>
   You're using something else!
<![endif]-->

IE 条件付きコメントのドキュメントは、http: //reference.sitepoint.com/css/conditionalcommentsにあります。

@spudley がコメントで述べたように、唯一の違いが の場合、styleこれulは最適なソリューションではありません。

于 2013-10-30T16:57:33.940 に答える
2

違いがスタイリングだけの場合は、ページの先頭にある条件付きコメントを使用して、実際の html 要素にクラスを設定できます。(ありがとうポール・アイリッシュ)

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>...

次に、スタイルシートを適切に変更します。

.toggle {list-style:none}
.lt-ie8 .toggle {margin-right:30px;}
于 2013-10-30T17:08:41.923 に答える
1

ブラウザごとに異なるマークアップはひどいものです。条件付きのスタイリングが必要な場合は、次のトリックを使用してください(オープニングの代わりに<html>):

<!--[if lt IE 7]>      <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->

そしてあなたのスタイルでそれを使用してください：

something {
    // styling for all browsers
}

.lt-ie9 something { 
    // styling for IE8 and below
}

(HTML5Boilerplate はこのようなものを使用していましたが、最近削除されました。)

もちろん、ブラウザ条件付きマークアップが本当に必要な場合（スタイリングだけでなく）、これはあなたを救うことはできませんが、実際の問題は「ブラウザ条件付きマークアップに頼らずに X を実行する方法」です。

于 2013-10-30T17:06:30.023 に答える