爲什麼css在不同的瀏覽器中顯示不同的風格？

我在頁面上有一個菜單。爲什麼css在不同的瀏覽器中顯示不同的風格？

<ul class="editorial-tabs-menu menu"> 
    <li class="first"><a href="#" class="selected">Home 
    <span></span> 
    </a></li> 
    <li><a href="#">Links</a> 
    <ul> 
     <li><a href="#analyzes">Link1</a></li> 
     <li><a href="#ux">Link2</a></li> 
    </ul> 
    </li> 
    <li><a href="#">About us</a></li> 
</ul>

我使用這個CSS吧：

.editorial-tabs-menu li a 
{ 
display: block; 
font-size: 13px; 
font-weight: bold; 
border: 1px solid #cfcfcf; 
-moz-border-radius-topleft: 3px; 
-moz-border-radius-topright: 3px; 
-webkit-border-top-left-radius: 3px; 
-webkit-border-top-right-radius: 3px; 
background: -moz-linear-gradient(90deg,#F0F8FF,#fff); 
background: -webkit-gradient(linear,0% 0,0% 100%,from(#F0F8FF),to(#fff)); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F8FF',endColorstr='#fff'); 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#F0F8FF, endColorstr=#FFFFFFFF, GradientType=0)"; 
padding: 3px 0; 
width: 83px; 
text-align: center; 
color: #666; 
text-decoration: none; 
font-family: 'B Nazanin',Tahoma,Arial; 
position: relative; 
/*border-bottom: none;*/ 
} 

.editorial-tabs-menu li a:hover, .editorial-tabs-menu li .selected 
{ 
    color: #FFF; 
    color: rgb(255, 255, 255); 
    background: -moz-linear-gradient(90deg, #095283, rgb(31, 108, 162)) repeat scroll 0px 0px transparent !important; 
    background: -webkit-gradient(linear,0% 0,0% 100%,from(#095283),to(rgb(31, 108, 162))); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#095283',endColorstr=' rgb(31, 108, 162)'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#095283, endColorstr='rgb(31, 108, 162)', GradientType=0)"; 
    border-color: #095283; 
} 

.menu ul li 
{ 
    height: 0; 
    overflow: hidden; 
    padding: 0; 
    -webkit-transition: height .25s ease .1s; 
    -moz-transition: height .25s ease .1s; 
    -o-transition: height .25s ease .1s; 
    -ms-transition: height .25s ease .1s; 
    transition: height .25s ease .1s; 
} 

.menu li:hover > ul li 
{ 
    height: 36px; 
    overflow: visible; 
    padding: 0; 
} 

.menu ul li a 
{ 
    width: 100px; 
    padding: 4px 0 4px 40px; 
    margin: 0; 
    background: none; 
    border: none; 
    float: right; 
    text-align: right; 
    /*border-bottom: 1px solid #353539;*/ 
}

我想設置爲background: none;子時hover。

我設置的CSS

.menu ul li a:hover 
    { 
     background: none; 
     color: #095283; 
    }

，但它得到的CSS .editorial-tabs-menu li a:hover時，子菜單懸停。

當我將此css更改爲background: red;時，它在chrom中爲紅色，但它在ie和mozila中獲得css .editorial-tabs-menu li a:hover。

來源

2013-04-17 Niloo

在你的樣式表中，你把'.menu ul li a：hover'放在哪裏？如果在此之前，它將被樣式表下方的CSS覆蓋。 –

@slacker將jsfiddle-link添加爲評論，而不是編輯。 – Natrium

@AlexLynham：Thnaks，但那是在那之後。 – Niloo

您可以使用!important來後綴您的樣式定義，以確保它覆蓋任何其他定義。例如，你可以在你的CSS寫：

a:hover{background-color: #f00 !important;}

這將匹配文件的全部標籤...

此的jsfiddle說明了這一點，http://jsfiddle.net/GG2Da/1 - 嘗試刪除從CSS的!important看看會發生什麼。

希望這有助於

來源

2013-04-17 06:27:31 lukeocom

非常感謝，我使用這個，它是在Firefox和鉻工作，但不工作在IE :( – Niloo

嘗試添加到您的CSS：{{background：none！important;} – lukeocom

我從' .editorial-tabs-menu li a：hover'並添加'.menu ul li a：hover {背景：none！important;}'，它在Firefox和chrom中工作，但在IE中不起作用 – Niloo

爲什麼css在不同的瀏覽器中顯示不同的風格？

回答

相關問題