关于ie中CSS的问题

时间:2022-02-16 03:37:39

I have an idea that I imagine is possible to make.

我有一个想法,我认为是可能的。

In a CSS file I need to put:

在CSS文件中,我需要:

height: 50px;

If the browser is Internet Explorer, and

如果浏览器是Internet Explorer,则

height: 45px;

if the browser is Chrome or Firefox.

如果浏览器是Chrome或Firefox。

How can I do this?

我该怎么做呢?

7 个解决方案

#1


4  

A special tag can be use as below:

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

<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]-->

NB: IE understands element's weight with borders, when other browsers don't.

NB: IE理解元素与边框的权重,而其他浏览器不理解。

#2


3  

There are a number of ways to achieve this, as it is quite common to need to provide alternative stylesheets for IE compared with other browsers.

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

However, it's important to note that the version of IE is also critical -- different versions of IE may have different problems, so you should target your hacks accordingly. In particular, Microsoft have recently released IE9, which is significantly more compatible with other browsers than earlier versions; you will almost certainly not need your hack in IE9, so you should be careful to exclude it.

然而,需要注意的是,IE的版本也很重要——不同版本的IE可能有不同的问题,因此您应该针对您的黑客。特别是,微软最近发布了IE9,比早期版本更加兼容其他浏览器;你几乎肯定不需要你的IE9黑客,所以你应该小心地排除它。

If you explicitly want to target IE - for example, you need to work around a particular IE bug - then the best approach is to use Conditional Comments. These are an IE-specific feature which allow to you to specify code that only runs in IE, and also to specify the version(s) of IE that it will run in.

如果您明确地希望以IE为目标(例如,您需要围绕一个特定的IE bug),那么最好的方法是使用条件注释。这是一个特定于IE的特性,允许您指定只在IE中运行的代码,还可以指定它将运行的IE版本。

Conditional Comments look like this:

条件评论如下:

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

IE sees the special code; all other browsers treat it as a normal HTML comment and ignore it.

(二)特殊代码;所有其他浏览器都将其视为普通的HTML注释,并忽略它。

You can learn more about them here: http://www.quirksmode.org/css/condcom.html

你可以在这里了解更多:http://www.quirksmode.org/css/condcom.html

I would point out that a lot of the problems with box size in IE are caused by not using a valid Doctype. If your HTML code is causing the browser to drop into quirks mode then you will get issues exactly like that, but the correct solution is not to hack your styles until it works; the correct solution is to fix the HTML so that the browser doesn't go into quirks mode. This should get the box model to work correctly, and a lot of the odd layout issues will disappear.

我要指出的是,IE中框大小的许多问题是由于没有使用有效的Doctype造成的。如果您的HTML代码导致浏览器进入怪癖模式,那么您将会遇到类似的问题,但是正确的解决方案是在它正常工作之前不要破解您的样式;正确的解决方案是修复HTML,这样浏览器就不会进入quirks模式。这将使box模型正确工作,并且许多奇怪的布局问题将会消失。

#3


2  

Without specifying which version of IE you're talking about it's hard to say. You could use a CSS hack, but conditional comments are generally better because they are more future-proof. Conditional comments are used like so:

如果不指明你谈论的是哪个版本的IE,那就很难说了。您可以使用CSS hack,但是条件注释通常更好,因为它们更具有未来性。条件注释的用法如下:

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

This is seen as just a normal comment in non-IE browsers, but IE will interpret it as code.

这在非IE浏览器中被看作是正常的注释,但是IE会将其解释为代码。

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

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

#4


2  

You can use conditional CSS by using

您可以使用条件CSS

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

Like that there is a way to check if it's Internet Explorer or not.

像这样,有一种检查它是否是Internet Explorer的方法。

For example, Conditional stylesheets vs CSS hacks? Answer: Neither!.

例如,条件样式表vs CSS hack ?回答:没有!

#5


1  

While that is possible, it would be better, to make sure that you eliminate all causes for different CSS in the first place. Does your HTML document have a DOCTYPE so that IE is in Standards Mode? If it does then show us the concrete situation where you think you need different CSS, because there is most likely a better solution.

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

#6


0  

I've done couple searches and found these, check it out it might be helpful:

我做了一些搜索,发现了这些,看看它可能有帮助:

  1. Targeting only FireFox with CSS

    仅针对FireFox使用CSS

  2. Can you target Google Chrome? (Yes, you can)

    你能瞄准谷歌Chrome吗?(是的,你可以)

#7


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

#1


4  

A special tag can be use as below:

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

<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]-->

NB: IE understands element's weight with borders, when other browsers don't.

NB: IE理解元素与边框的权重,而其他浏览器不理解。

#2


3  

There are a number of ways to achieve this, as it is quite common to need to provide alternative stylesheets for IE compared with other browsers.

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

However, it's important to note that the version of IE is also critical -- different versions of IE may have different problems, so you should target your hacks accordingly. In particular, Microsoft have recently released IE9, which is significantly more compatible with other browsers than earlier versions; you will almost certainly not need your hack in IE9, so you should be careful to exclude it.

然而,需要注意的是,IE的版本也很重要——不同版本的IE可能有不同的问题,因此您应该针对您的黑客。特别是,微软最近发布了IE9,比早期版本更加兼容其他浏览器;你几乎肯定不需要你的IE9黑客,所以你应该小心地排除它。

If you explicitly want to target IE - for example, you need to work around a particular IE bug - then the best approach is to use Conditional Comments. These are an IE-specific feature which allow to you to specify code that only runs in IE, and also to specify the version(s) of IE that it will run in.

如果您明确地希望以IE为目标(例如,您需要围绕一个特定的IE bug),那么最好的方法是使用条件注释。这是一个特定于IE的特性,允许您指定只在IE中运行的代码,还可以指定它将运行的IE版本。

Conditional Comments look like this:

条件评论如下:

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

IE sees the special code; all other browsers treat it as a normal HTML comment and ignore it.

(二)特殊代码;所有其他浏览器都将其视为普通的HTML注释,并忽略它。

You can learn more about them here: http://www.quirksmode.org/css/condcom.html

你可以在这里了解更多:http://www.quirksmode.org/css/condcom.html

I would point out that a lot of the problems with box size in IE are caused by not using a valid Doctype. If your HTML code is causing the browser to drop into quirks mode then you will get issues exactly like that, but the correct solution is not to hack your styles until it works; the correct solution is to fix the HTML so that the browser doesn't go into quirks mode. This should get the box model to work correctly, and a lot of the odd layout issues will disappear.

我要指出的是,IE中框大小的许多问题是由于没有使用有效的Doctype造成的。如果您的HTML代码导致浏览器进入怪癖模式,那么您将会遇到类似的问题,但是正确的解决方案是在它正常工作之前不要破解您的样式;正确的解决方案是修复HTML,这样浏览器就不会进入quirks模式。这将使box模型正确工作,并且许多奇怪的布局问题将会消失。

#3


2  

Without specifying which version of IE you're talking about it's hard to say. You could use a CSS hack, but conditional comments are generally better because they are more future-proof. Conditional comments are used like so:

如果不指明你谈论的是哪个版本的IE,那就很难说了。您可以使用CSS hack,但是条件注释通常更好,因为它们更具有未来性。条件注释的用法如下:

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

This is seen as just a normal comment in non-IE browsers, but IE will interpret it as code.

这在非IE浏览器中被看作是正常的注释,但是IE会将其解释为代码。

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

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

#4


2  

You can use conditional CSS by using

您可以使用条件CSS

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

Like that there is a way to check if it's Internet Explorer or not.

像这样,有一种检查它是否是Internet Explorer的方法。

For example, Conditional stylesheets vs CSS hacks? Answer: Neither!.

例如,条件样式表vs CSS hack ?回答:没有!

#5


1  

While that is possible, it would be better, to make sure that you eliminate all causes for different CSS in the first place. Does your HTML document have a DOCTYPE so that IE is in Standards Mode? If it does then show us the concrete situation where you think you need different CSS, because there is most likely a better solution.

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

#6


0  

I've done couple searches and found these, check it out it might be helpful:

我做了一些搜索,发现了这些,看看它可能有帮助:

  1. Targeting only FireFox with CSS

    仅针对FireFox使用CSS

  2. Can you target Google Chrome? (Yes, you can)

    你能瞄准谷歌Chrome吗?(是的,你可以)

#7


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