Question

我有以下代码在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>

Answer 1

您应该可以执行以下操作：

<!--[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，那么这不是最佳解决方案。

Answer 2

如果区别仅在样式中，您可以使用页面开头的条件注释在实际的html元素上设置类。（Thanks Paul Irish）

<!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;}

Answer 3

不同浏览器的不同标记很糟糕。如果您需要条件样式，请转到this trick（而不是开头<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一直使用类似的东西，但最近他们dropped it。）

当然，如果确实需要浏览器条件标记（不仅仅是样式），这当然不会保存你，但是我会说你的实际问题是“如何不使用浏览器条件标记“。

IE浏览器检查的条件语句

3 个答案: