height: 50px;
如果浏览器是Internet Explorer,那么
height: 45px;
如果浏览器是Chrome或Firefox。
我该怎么做?
height: 50px;
height: 45px;
<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浏览器在计算元素的宽度时会将边框也计算在内,而其他浏览器则不会。
有多种方法可以实现这一点,因为通常需要为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以使浏览器不进入怪异模式。这应该可以正确地使盒模型工作,并且许多奇怪的布局问题也将消失。
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6
<![endif]-->
就像有一种方法可以检查它是否为Internet Explorer。
如果没有指定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 html>
)来确保IE处于标准模式。这将立即解决许多IE问题。 - ThatMatthew虽然这是可能的,但最好还是确保首先消除所有导致不同CSS的原因。你的HTML文档是否有一个DOCTYPE,使得IE处于标准模式?如果有,那么请向我们展示你认为需要不同CSS的具体情况,因为很可能有更好的解决方案。
<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>