列表在IE7/8中未正確顯示。圖像邊界半徑等

首先，在的jsfiddle：http://jsfiddle.net/MhFk4/2/列表在IE7/8中未正確顯示。圖像邊界半徑等

在IE9一切工作正常，但IE8 &下面我遇到的問題..在開發網站，只是按鈕的節目之一起來IE8在所有（但在撥弄它顯示出來，但邊界半徑不能正常工作？）

這裏的實際開發的網站，看看IE8確實存在：

.view-home-cta-view { 
ul { 
    list-style: none; 
    margin: 40px 0 0; 
    padding: 0; 
    height: 380px; 

    li { 
     float:left; 
     margin: 0 25px 0 0; 
     position:relative; 

     .views-field-field-cta-image { 
      border: 10px solid #fff; 
      @include border-radius(150px); 
      width:270px; 
      box-shadow:0 0 25px rgba(0, 0, 0, 0.7); 

      -moz-background-clip: padding; 
      -webkit-background-clip: padding-box; 
      background-clip: padding-box; 

      img { 
       max-width:100%; 
       height: auto; 
       @include border-radius(140px); 
      } 
     } 
     .views-field-field-regular-link { 
      font-family: $o; 
      font-size:22px; 
      width:100%; 
      position:absolute; 
      bottom:14px; // 60px up from bottom 
      left: 0; 
      z-index: 3000; 
      a { 
       color:#fff; 
       text-decoration: none; 
       background: $green; 
       display:block; 
       text-align:center; 
       line-height:22px; 
       padding: 13px 0 15px; 
       @include border-radius(5px); 
       box-shadow:0 0 10px rgba(0, 0, 0, 0.7); 
       @include transition(0.5s); 
       &:hover { 
        background: lighten($green,5%); 
       } 
      } 
     } 
     .views-field-field-attachment-link { 
      font-family: $o; 
      font-size:16px; 
      width:100%; 
      position:absolute; 
      bottom:-20px; 
      left:0; 
      a { 
       color:#fff; 
       text-decoration: none; 
       background: $brown; 
       display:block; 
       text-align:center; 
       @include border-radius(0 0 5px 5px); 
       margin: 0 20px; 
       padding: 8px 0 10px; 
       line-height:16px; 
       box-shadow:0 0 7px rgba(0, 0, 0, 0.6); 
       @include transition(0.5s); 
       &:hover { 
        background: lighten($brown,5%); 
       } 
      } 
     } 

     &.views-row-last { 
      margin-right: 0; 
     } 
    } 
}}

所有的SCSS代碼都在JSfiddle中（mixins a nd變量的顏色）。如果任何人都能對此發光，我會很感激，謝謝！

來源

2013-01-24 Jassi

可能是您當前的html文檔類型存在問題。嘗試在適當的HTML5文檔類型上重新構建HTML佈局，而不是在給定時刻使用的任何內容。然後查看在IE8模式下渲染時圖像是否消失。 – blackhawk

我已經投票結束這個問題，因爲它太本地化了，不可能幫助任何未來的訪問者。你應該減少你的例子，以便它包含足夠的代碼來演示問題，而不需要額外的東西。這樣做可能需要很多工作，但它是解決問題的關鍵部分。 – KatieK

@blachawk doctype似乎沒有改變任何東西，但不幸的是，謝謝你的建議！我注意到這個問題涉及到z索引，我設法讓第二個鏈接出現在第一個鏈接下面的z-index上。但是，爲圖像區域的div添加z-index沒有做任何事情，所以我仍然對整個事情感到困惑。 – Jassi

這裏的問題圍繞着z-index，我設法通過將z-index每個容器div的，li元素的內部來解決它，也可以添加在li本身的額外z-index。

來源

2013-01-29 17:59:23 Jassi

列表在IE7/8中未正確顯示。圖像邊界半徑等

回答

相關問題