CSS无法在FF和chrome中使用，但在IE 6和amp;中可以正常使用7 [英] CSS not working in FF and chrome but fine in IE 6 & 7

问题描述

你好朋友，

我对CSS有问题.以下CSS用于我的ASP菜单控件，该CSS在IE中工作正常，但在其他浏览器(例如Chrome& FF.

这是我的CSS.

Hello Friends,

I have a problem regarding to CSS. The following CSS is for my ASP menu control, this CSS is working fine In IE but not other browser like Chrome & FF.

This is My CSS.

.primaryStaticMenu
{
    border:2px solid #3cc3ff;
}
.primaryStaticMenuItem
{
    width:8em;
    font-size:14px;
    font-weight:bold;
    color:#3cc3ff;
    text-decoration:none;
    margin-left:5px;
    padding-left:10px;
    border-right-width:2px;
    border-right-style:solid;
    border-right-color:#3cc3ff;
    text-align:center;
    line-height:30px;
    padding-right:10px;
}
.primaryStaticHover
{
    /*color: #3cc3ff;
    background: #FFFFFF;*/
    font-size:14px;
    font-weight:bold;
    color:#FFFFFF;
    text-decoration:none;
    margin-left:5px;
    padding-left:10px;
    border-right-width:2px;
    border-right-style:solid;
    border-right-color:#3cc3ff;
    text-align:center;
    line-height:30px;
    padding-right:10px;
}

.primaryDynamicMenu
{
    border-bottom:solid 1px #3cc3ff;
    border-color:#3cc3ff;
    width:10em;
}
.primaryDynamicMenuItem
{
    width: 10em;
    color: #3cc3ff;
    padding: 0.5em .1em 0.5em .5em;
    border-width: 1px; /*border-color: #f7f2ea #aaab9c #f7f2ea #efefef;*/
    border-color: #3cc3ff #3cc3ff #3cc3ff #3cc3ff;
    border-style: solid;
    background-color: #0089c8;
    text-align: left;
}
.primaryDynamicHover
{
    color:#FFFFFF;
}
 .secondaryLevelOne
{
   background-color:transparent;
   background-repeat:repeat-x;
   margin:1.5em 0 0 0;
   padding:5px 0 0 5px;
   width:12em;
   height:35px;
}
.secondaryLevelTwo
{
   background:#FAFBFB;
   padding:5px 0 5px 5px;
}
.secondaryStaticHover
{
   color:#800000;
}
.StaticSelectedStyle
{
    color: #FFFFFF;
    text-decoration: none;
}
.DynamicSelectedStyle
{
    color:#FFFFFF;
    text-decoration:none;
}

在此先感谢.

Thanks in Advance.

推荐答案

嘿，

您似乎已经将

Hey there,

you seem to have put

em

值，而不是

value instead of

px

我个人建议您将所有em更改为px
这是一个转换器: http://pxtoem.com/ [

I personaly recomment you change all the em to px
here is a converter: http://pxtoem.com/[^]

If your having issues in IE after changing that then pasted this in your HTML page:

<!--[if IE]>
<style type="text/css">
.primaryStaticMenu
{
    border:2px solid #3cc3ff;
}
.primaryStaticMenuItem
{
    width:8em;
    font-size:14px;
    font-weight:bold;
    color:#3cc3ff;
    text-decoration:none;
    margin-left:5px;
    padding-left:10px;
    border-right-width:2px;
    border-right-style:solid;
    border-right-color:#3cc3ff;
    text-align:center;
    line-height:30px;
    padding-right:10px;
}
.primaryStaticHover
{
    /*color: #3cc3ff;
    background: #FFFFFF;*/
    font-size:14px;
    font-weight:bold;
    color:#FFFFFF;
    text-decoration:none;
    margin-left:5px;
    padding-left:10px;
    border-right-width:2px;
    border-right-style:solid;
    border-right-color:#3cc3ff;
    text-align:center;
    line-height:30px;
    padding-right:10px;
}
 
.primaryDynamicMenu
{
    border-bottom:solid 1px #3cc3ff;
    border-color:#3cc3ff;
    width:10em;
}
.primaryDynamicMenuItem
{
    width: 10em;
    color: #3cc3ff;
    padding: 0.5em .1em 0.5em .5em;
    border-width: 1px; /*border-color: #f7f2ea #aaab9c #f7f2ea #efefef;*/
    border-color: #3cc3ff #3cc3ff #3cc3ff #3cc3ff;
    border-style: solid;
    background-color: #0089c8;
    text-align: left;
}
.primaryDynamicHover
{
    color:#FFFFFF;
}
 .secondaryLevelOne
{
   background-color:transparent;
   background-repeat:repeat-x;
   margin:1.5em 0 0 0;
   padding:5px 0 0 5px;
   width:12em;
   height:35px;
}
.secondaryLevelTwo
{
   background:#FAFBFB;
   padding:5px 0 5px 5px;
}
.secondaryStaticHover
{
   color:#800000;
}
.StaticSelectedStyle
{
    color: #FFFFFF;
    text-decoration: none;
}
.DynamicSelectedStyle
{
    color:#FFFFFF;
    text-decoration:none;
}
</style>
<![endif]-->

告诉我进展如何，
Jrop

Tell me how it goes,
Jrop

嘿，

您似乎已经将

Hey there,

you seem to have put

em

值，而不是

value instead of

px

我个人建议您将所有em更改为px
这是一个转换器: http://pxtoem.com/ [

I personaly recomment you change all the em to px
here is a converter: http://pxtoem.com/[^]

If your having issues in IE after changing that then pasted this in your HTML page:

<!--[if IE]>
<style type="text/css">
.primaryStaticMenu
{
    border:2px solid #3cc3ff;
}
.primaryStaticMenuItem
{
    width:8em;
    font-size:14px;
    font-weight:bold;
    color:#3cc3ff;
    text-decoration:none;
    margin-left:5px;
    padding-left:10px;
    border-right-width:2px;
    border-right-style:solid;
    border-right-color:#3cc3ff;
    text-align:center;
    line-height:30px;
    padding-right:10px;
}
.primaryStaticHover
{
    /*color: #3cc3ff;
    background: #FFFFFF;*/
    font-size:14px;
    font-weight:bold;
    color:#FFFFFF;
    text-decoration:none;
    margin-left:5px;
    padding-left:10px;
    border-right-width:2px;
    border-right-style:solid;
    border-right-color:#3cc3ff;
    text-align:center;
    line-height:30px;
    padding-right:10px;
}
 
.primaryDynamicMenu
{
    border-bottom:solid 1px #3cc3ff;
    border-color:#3cc3ff;
    width:10em;
}
.primaryDynamicMenuItem
{
    width: 10em;
    color: #3cc3ff;
    padding: 0.5em .1em 0.5em .5em;
    border-width: 1px; /*border-color: #f7f2ea #aaab9c #f7f2ea #efefef;*/
    border-color: #3cc3ff #3cc3ff #3cc3ff #3cc3ff;
    border-style: solid;
    background-color: #0089c8;
    text-align: left;
}
.primaryDynamicHover
{
    color:#FFFFFF;
}
 .secondaryLevelOne
{
   background-color:transparent;
   background-repeat:repeat-x;
   margin:1.5em 0 0 0;
   padding:5px 0 0 5px;
   width:12em;
   height:35px;
}
.secondaryLevelTwo
{
   background:#FAFBFB;
   padding:5px 0 5px 5px;
}
.secondaryStaticHover
{
   color:#800000;
}
.StaticSelectedStyle
{
    color: #FFFFFF;
    text-decoration: none;
}
.DynamicSelectedStyle
{
    color:#FFFFFF;
    text-decoration:none;
}
</style>
<![endif]-->

告诉我进展如何，
Jrop

Tell me how it goes,
Jrop

这篇关于CSS无法在FF和chrome中使用，但在IE 6和amp;中可以正常使用7的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！