关于 Internet Explorer 中 CSS 的问题

Question

我有一个我认为可以实现的想法。

我需要在一个 CSS 文件中放入：

height: 50px;

如果浏览器是 Internet Explorer，并且

height: 45px;

如果浏览器是 Chrome 或 Firefox。

我该怎么做？

Answer 1

您可以通过使用条件 CSS

<!--[if IE 6]>
    According to the conditional comment this is Internet Explorer 6
<![endif]-->

好像有一种方法可以检查它是否是 Internet Explorer。

例如，Conditional stylesheets vs CSS hacks? Answer: Neither!。

Answer 2

一个特殊的标签可以使用如下：

<style type="text/css" media="screen">
   .yourTag { weight: 45px; }
   /*Normal browsers*/
</style>

<!--[if IE]>
<style type="text/css" media="screen">
   /*IE*/
   .yourTag { weight: 50px; }
</style>
<![endif]-->

注意：IE 可以通过边框了解元素的权重，而其他浏览器不了解。

Answer 3

有很多方法可以实现这一点，因为与其他浏览器相比，需要为 IE 提供替代样式表是很常见的。

但是，重要的是要注意 IE 的版本也很关键——不同版本的 IE 可能有不同的问题，因此您应该相应地针对您的 hack。特别是微软最近发布了IE9，与早期版本相比，与其他浏览器的兼容性明显增强；您几乎可以肯定在 IE9 中不需要您的 hack，因此您应该小心排除它。

如果您明确希望以 IE 为目标 - 例如，您需要解决特定的 IE 错误 - 那么最好的方法是使用 条件注释。这些是 IE 特定的功能，允许您指定仅在 IE 中运行的代码，还可以指定它将在其中运行的 IE 版本。

条件注释如下所示：

<!--[if lt IE 9]><link rel="stylesheet" href="ie-specific-styles.css" /><![endif]-->

IE 看到特殊代码；所有其他浏览器都将其视为普通的 HTML 注释并忽略它。

您可以在这里了解更多信息：http://www.quirksmode.org/css/condcom.html

我要指出，IE 中的许多框大小问题都是由于未使用有效的 Doctype 造成的。如果您的 HTML 代码导致浏览器进入 quirks 模式，那么您将遇到类似的问题，但正确的解决方案是 不 破解您的样式，直到它工作为止；正确的解决方案是修复 HTML，使浏览器不会进入怪癖模式。这应该可以让盒子模型正常工作，并且很多奇怪的布局问题都会消失。

Answer 4

    <script type = "text/javascript">
    function checkBrowser()
    {
      var browserName=navigator.appName; 
      if (browserName=="Netscape")
      { 
        //set height as 45px;
      }
      else 
      { 
        if (browserName=="Microsoft Internet Explorer")
        {
       //set height as 50px;
        }
     }    
}
</script>

Answer 5

虽然这是可能的，但最好首先确保消除导致不同 CSS 的所有原因。您的 HTML 文档是否具有 DOCTYPE 以使 IE 处于标准模式？如果确实如此，则向我们展示您认为需要不同 CSS 的具体情况，因为很可能有更好的解决方案。

Answer 6

如果不指定您所谈论的 IE 版本，则很难说。您可以使用 CSS hack，但条件 cmets 通常更好，因为它们更具前瞻性。条件 cmets 的使用方式如下：

<!--[if IE]
<link type="text/css" rel="stylesheet" href="ie-styles.css" />
<![endif]-->

这在非 IE 浏览器中被视为普通注释，但 IE 会将其解释为代码。

见：http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx