Conditional Statements on IE browser check

StackOverflow https://stackoverflow.com/questions/19689106

Pergunta

I have the following code to display a certain UL while in IE7. How can I then apply the other UL style for all browsers except IE7? for example to chrome, firefox, and 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>
Foi útil?

Solução 2

If the difference is just in the styling you could use the conditional comments at the start of the page to set a class on the actual html element. (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>...

and then just modify the stylesheet appropriately:

.toggle {list-style:none}
.lt-ie8 .toggle {margin-right:30px;}

Outras dicas

You should be able to do something like:

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

The documentation for IE Conditional Comments can be found here: http://reference.sitepoint.com/css/conditionalcomments

As @spudley said in the comments, if the only difference is the style in the ul then this is not the best solution for you.

Different markup for different browsers is terrible. If you need conditional styling, then go for this trick (instead of the opening <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]-->

and use it in your styles:

something {
    // styling for all browsers
}

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

(HTML5Boilerplate has been using something like this, but they dropped it recently.)

This, of course, won't save you if you really need browser-conditional markup (not just styling), but then I'd say your actual problem is "how to do X without resorting to browser-conditional markup".

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top