Internet Explorer 8在以下方面產生奇怪的CSS錯誤：hover

Question

我正在進行網站開發，現在使用CSS來設計麪包屑路徑。但是，我在Internet Explorer 8中遇到了這個奇怪的錯誤，我無法弄清楚它爲什麼會發生。爲了說明這一點，這裏有一些圖片：

這就是麪包屑的人都應該看的時候上空盤旋，如：http://i.imgur.com/Lrr5Qo0.png（在Chrome中拍攝的圖像）

在Internet Explorer中，這是什麼樣子時，懸停：http://i.imgur.com/V5dzdcX.png

它在懸停前顯示正常，但只要鼠標移過去，它就會變得堅硬。

我已經通過了CSS代碼，唯一與hover有關的屬性是顏色，背景，溢出和文本修飾。與保證金，填充物，身高等無關。

有什麼可能導致這種情況？

相關HTML：

<div class="headtitle pull-left"> 
    <h1 id="pageTitle" class="ms-core-pageTitle"> 

    CX Team 

    </h1> 
    <ul class="s4-breadcrumb"> 
     <li class="s4-breadcrumbRootNode"> 
      <span class="s4-breadcrumb-arrowcont"> 
       <img src="/_layouts/images/nodearrow.png" alt="" style="border-width:0px;display:inline-block;padding-top:4px;" /> 
      </span> 
      <a class="s4-breadcrumbRootNode" href="/sites/cc/Pages/index.aspx">Connect</a> 
      <ul class="s4-breadcrumbRootNode"> 
       <li class="s4-breadcrumbNode"> 
        <span class="s4-breadcrumb-arrowcont"> 
         <img src="/_layouts/images/nodearrow.png" alt="" style="border-width:0px;display:inline-block;padding-top:4px;" /> 
        </span> 
        <a class="s4-breadcrumbNode" href="/sites/cc/residential/Pages/index0709-9951.aspx">Residential</a> 
        <ul class="s4-breadcrumbNode"> 
         <li class="s4-breadcrumbNode"> 
          <span class="s4-breadcrumb-arrowcont"> 
           <img src="/_layouts/images/nodearrow.png" alt="" style="border-width:0px;display:inline-block;padding-top:4px;" /> 
          </span> 
          <a class="s4-breadcrumbNode" href="/sites/cc/residential/customerexperience/Pages/default.aspx">Customer Experience</a> 
          <ul class="s4-breadcrumbNode"> 
           <li class="s4-breadcrumbCurrentNode"> 
            <span class="s4-breadcrumb-arrowcont"> 
             <img src="/_layouts/images/nodearrow.png" alt="" style="border-width:0px;display:inline-block;padding-top:4px;" /> 
            </span> 
            <a class="s4-breadcrumbCurrentNode" href="/sites/cc/residential/customerexperience/Pages/CX-Team.aspx">CX Team</a> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

可惜我沒有在這個控制;它由Sharepoint動態創建（我被迫使用）。

CSS：

.s4-breadcrumb a:hover { 
    overflow:auto\9; 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9900', endColorstr='#FF6600'); 
    background-image:-moz-linear-gradient(top,#F90,#F60); 
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#F90),to(#F60)); 
    background-image:-o-linear-gradient(top,#F90,#F60); 
    background-image:linear-gradient(to bottom,#F90,#F60); 
} 

.v4master .s4-breadcrumbNode a, 
.v4master .s4-breadcrumbCurrentNode a, 
.v4master .s4-breadcrumbRootNode a, 
.v4master .s4-breadcrumbNode a:hover, 
.v4master .s4-breadcrumbCurrentNode a:hover, 
.v4master .s4-breadcrumbRootNode a:hover { 
    color:white !important; 
} 

ul.s4-breadcrumb, 
ul.s4-breadcrumb ul { 
    line-height:normal; 
} 

ul.s4-breadcrumb a { 
    line-height:40px; 
} 

ul.s4-breadcrumb, 
ul.s4-breadcrumb ul { 
    margin-bottom:0; 
} 

ul.s4-breadcrumb .s4-breadcrumb-arrowcont { 
    margin-bottom:14px; 
} 

ul.s4-breadcrumb, 
ul.s4-breadcrumb ul { 
    margin-left:0; 
} 

ul.s4-breadcrumb, 
ul.s4-breadcrumb ul { 
    margin-right:0; 
} 

ul.s4-breadcrumb, 
ul.s4-breadcrumb ul { 
    margin-top:0; 
} 

ul.s4-breadcrumb .s4-breadcrumb-arrowcont { 
    margin-top:10px; 
} 

.s4-breadcrumb a { 
    padding-left:5px; 
} 

.headtitle > ul.s4-breadcrumb { 
    padding-left:10px; 
} 

.headtitle > ul.s4-breadcrumb { 
    padding-left:0\9; 
} 

.s4-breadcrumb { 
    padding-left:15px; 
} 

.s4-breadcrumb a { 
    padding-right:5px; 
} 

.s4-breadcrumb { 
    padding-right:15px; 
} 

.s4-breadcrumb a:hover { 
    text-decoration:none; 
} 

Answer 1

我看到兩件事情可能會導致它：溢出聲明與IE9只破解，而缺乏的宣言是專治老-IE hasLayout錯誤，這錯誤如果你使用CSS過濾器，就會起作用。

看看這工作（我希望你有過CSS控制）：

.s4-breadcrumb a:hover { 
    overflow: auto; /* or: hidden */ 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9900', endColorstr='#FF6600'); 
    zoom: 1; /* cure for the bug */ 
    background-image:-moz-linear-gradient(top,#F90,#F60); 
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#F90),to(#F60)); 
    background-image:-o-linear-gradient(top,#F90,#F60); 
    background-image:linear-gradient(to bottom,#F90,#F60); 
} 

。
如果這樣不能治癒它，請製作一個http://jsbinb.com。如果您爲圖片添加寬度，高度和邊框，則無法自行上傳。那就是：如果HTML中的圖像在這方面發揮作用。