条件样式不起作用

Posted 2023-03-06

【中文标题】条件样式不起作用

【英文标题】：Conditional style not working

【发布时间】：2018-04-09 05:15:28

【问题描述】：

根据浏览器是否为 IE，我需要条件样式。

方法 1

<!--[if IE]>
  <style>
   .myDivbackground-color: #0F0;
  </style>
<![endif]-->
<!--[if !IE]>
  <style>
   .myDivbackground-color: #000;
  </style>
<![endif]-->

方法 2

<script type="text/javascript">
  function myFunc()
  
    if ($.browser.msie) // Internet Explorer
    
       $(".myDiv").css("background-color", "#0F0");
    
    else // Other browsers
    
       $(".myDiv").css("background-color", "#000");
    
    return false;
  
  window.onload  = myFunc;
</script>
<div class="myDiv" style="width: 200px;">Hello</div>

当我将代码托管在本地或测试服务器中时，这两种方法都可以正常工作。但是当我在 prod 机器上运行它们时它们就不起作用了。

当我打开浏览器控制台时（对于方法 2），当托管在本地或测试服务器中时，我可以看到类似的内容

<div class="myDiv" style="width: 200px;" jQuery15487254606012953487="4">
  Hello
</div>

当托管在有问题的服务器中时，我会在控制台中看到这个

<div class="myDiv" style="width: 200px;">
  Hello
</div>

这种差异是否暗示了我缺少的任何东西？

我使用以下

jquery-1.3.1.min.js 本地和服务器中的 IIS 8.5.9748.0 带有 C# 的 Asp.net

【问题讨论】：

你试过清理浏览器缓存吗？

不确定浏览器嗅探 JS，但我认为较新的 IE 不再支持条件 cmets（如果我没记错的话，因为 IE10）。如果我不得不猜测它为什么在您的本地环境中运行而不是在现场运行，我猜您缺少http-equiv="X-UA-Compatible" content="IE=edge" 元标记并且您的浏览器在本地以兼容模式运行，因此它呈现为旧版本支持这些方法的浏览器。

@Daniel H 是的，我有。没用:(

【参考方案1】：

当您说window.onload = myFunc(); 时，您会立即调用myFunc —— 甚至可能在任何要设置样式的元素之前。

将myFunc() 替换为myFunc（无括号）以设置处理程序。或者，更好的是，说 $(myFunc) 并完全停止使用 window.onload 放屁。

除此之外，$.browser has been removed from jQuery。如果您坚持关心正在使用哪个浏览器，请查看navigator.userAgent。 （但坦率地说，没有什么好理由再关心了，还有一些非常好的理由不关心。）

【讨论】：

删除括号没有帮助。

那是因为$.browser 不再存在。浏览器嗅探本身已被弃用以支持功能测试，但如果您坚持，我已经编辑了我的答案以提及如何做到这一点。