在 HAML 和 Rails 中使用 IE 条件注释答案

【问题标题】：Using IE conditional comments in HAML and Rails在 HAML 和 Rails 中使用 IE 条件注释
【发布时间】：2012-12-21 17:51:55
【问题描述】：

我正在尝试根据找到此主题的建议使用 IE 条件注释。 "[ !IE]" conditional comments in Haml 但是它不起作用，我不知道为什么。

我正在尝试编辑 Ruby on Rails 应用程序，而且我是 HAML 和 Rails 的新手。任何帮助，将不胜感激。

这是我尝试使用的 HAML 代码。

%section#audio-controls
  =surround '<!--[if !IE]> -->'.html_safe, '<!-- <![endif]-->'.html_safe do  
    = audio_tag( '/audios/elder.wav', :controls => 'controls', :id => 'elder_audio' )
  =surround '<!--[if IE]> -->'.html_safe, '<!-- <![endif]-->'.html_safe do  
    = audio_tag( '/audios/elder.mp3', :controls => 'controls', :id => 'elder_audio' )

我也试过这段代码，认为可能是 audio_tag 的问题

%section#audio-controls
  =surround '<!--[if !IE]> -->'.html_safe, '<!-- <![endif]-->'.html_safe do  
    %p
      This is not IE
  =surround '<!--[if IE]> -->'.html_safe, '<!-- <![endif]-->'.html_safe do  
    %p
      This is IE

【问题讨论】：

@benedikt-deicke 使用您的代码时，所有内容都被注释掉，因此它是有效且无条件的注释。
条件 cmets 仅在 IE 中受支持，因此在所有其他浏览器中被视为普通 cmets。你是对的，if !IE 声明在这种情况下并没有真正的意义。

标签： ruby-on-rails internet-explorer comments haml

【解决方案1】：

HAML 支持使用 /[] syntax 的条件 cmets。

将您的示例更改为类似的内容，它应该可以按预期工作：

%section#audio-controls
  /[if !IE]
    %p This is not IE, but this won't be rendered as all other browsers don't know about conditional comments
  /[if IE]
    %p This is IE

【讨论】：

那么是否有可能让第一个 %p 在 IE 中查看时不显示，但仍显示在其他浏览器中？
不能单独使用条件 cmets。您可以做的是将一些 JavaScript 添加到 /[if IE] 块中，以隐藏非 ie %p。
@rsnyder 对if IE cmets 使用/[if IE] 语法，对!IE cmets 使用=surround ''.html_safe, ''.html_safe do。关键是!IE cmets 不是单个评论，您需要围绕内容使用两个单独的 cmets。 if IE cmets 是单个注释，因此正常的 Haml 注释语法适用于它们。

【解决方案2】：

使用html2haml 命令行实用程序将 HTML 转换为 HAML。

例如：

alhafoudh@Aluminium:~$ html2haml 
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

^D
/[if IE 6]
  Special instructions for IE 6 here

【讨论】：

【解决方案3】：

对于我来说只有几个条件可以这样做：

!!!
:plain
  <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--><!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]--><!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]--> <!--[if IE 9]><html class="no-js lt-ie10" lang="en"> <![endif]--> <!--[if gt IE 9]><!-->
%html.no-js{:lang => 'en'}
  / <![endif]

  %head
    %title Yinlang

【讨论】：