logo标签列表

关于Internet Explorer中的CSS的问题

htmlcssinternet-explorercross-browser
4
我有一个想法，我认为它是可能实现的。 在CSS文件中，我需要放置：
height: 50px;

如果浏览器是Internet Explorer，那么
height: 45px;

如果浏览器是Chrome或Firefox。
我该怎么做？
如果您使用MooTools或jQuery等框架，检测浏览器会更容易。 - KJYe.Name
1
@kjy112：浏览器检测 - 特别是使用JavaScript - 是你应该尽量避免的东西。 - RoToRa
在这种情况下，我只需要调整2或3个像素，即IE8和7。 - anvd
2
你在使用什么文档类型（源代码的第一行）？ - thirtydot
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - anvd
显示剩余2条评论
6个回答
4
一个特殊的标签可以如下使用：
<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浏览器在计算元素的宽度时会将边框也计算在内，而其他浏览器则不会。

3

有多种方法可以实现这一点，因为通常需要为IE提供与其他浏览器不同的替代样式表。

然而，重要的是要注意IE的版本也很关键--不同版本的IE可能会有不同的问题，因此您应该有针对性地解决这些问题。特别是，微软最近发布了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中关于盒子大小的很多问题都是由于没有使用有效的文档类型引起的。如果您的HTML代码导致浏览器进入怪异模式，那么您将遇到与此类似的问题，但正确的解决方法不是通过样式hack使其正常工作，而是修复HTML以使浏览器不进入怪异模式。这应该可以正确地使盒模型工作，并且许多奇怪的布局问题也将消失。

2
2

如果没有指定IE的版本，很难确定。你可以使用CSS hack，但是条件注释通常更好，因为它们更具有未来性。条件注释的使用方法如下：

<!--[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

当然，您应该通过在页面的第一行包含doctype（例如<!DOCTYPE html>）来确保IE处于标准模式。这将立即解决许多IE问题。 - ThatMatthew
1

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

-1
    <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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接