在IE8中的圓角，部分div溢出到其他div不可見

Question

我想創建一些div（應該是按鈕），有圓角。我可以通過使用border-radius.htc或PIE.htc來完成這項工作。

我使用margin-top定位它們。流向下面另一個div的按鈕部分不可見，應該是這樣。檢查截圖：

.menu_buttons{ 
     margin-top:45px; 
     overflow: visible; 
     margin-left: 10px; 
     width: 85px; 
     height: 3em; 
     vertical-align: middle; 
     float:left; 
     cursor: pointer; 
     text-align: center; 
     font: 0.9em Arial, Helvetica, sans-serif; 

     border-radius: 10px; 
     behavior: url(PIE.htc); 

} 

.diagonal：

.diagonal{ 

    background-image: linear-gradient(left top, #CFD993 30%, #8DA900 68%); 
    background-image: linear-gradient(-45deg, #CFD993 30%, #8DA900 68%); 
    background-image: -o-linear-gradient(left top, #CFD993 30%, #8DA900 68%); 
    background-image: -moz-linear-gradient(-45deg left top, #CFD993 30%, #8DA900 68%); 
    background-image: -webkit-linear-gradient(135deg, #CFD993 30%, #8DA900 68%); 
    background-image: -ms-linear-gradient(left top, #CFD993 30%, #8DA900 68%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CFD993', endColorstr='#8DA900', GradientType=1); 
    /*background: #CFD993;*/ 


    background-image: -webkit-gradient(
      linear, 
      left top, 
      right bottom, 
      color-stop(0.3, #CFD993), 
      color-stop(0.68, #8DA900) 
    ); 

} 

我的HTML的部分：

<div class="diagonal" id="section1"> 
     <img alt="SMIC Service Management In the Cloud" src="/images/smic_small.png" id="smic">   
     <div class="link_menu"> 
      <button class="menu_buttons ui-corner-all smic_green" id="overview">Overview</button> 
      <!--Some more <div....--> 
      <button class="menu_buttons ui-corner-all smic_green" id="usage_benchmark">SMICloud<br>usage<br>benchmark</button>    
      <a class="menu_items" id="get_smic">Get SMICloud</a> 
      <!--Some more <a....--> 
      <a class="menu_items" id="contact">Contact</a> 
     </div> 

    </div> 

添加以下內容.diagonal根據下面的截圖改變一下：

position: relative; 
z-index: -1; 

當嘗試的z-index -10添加到div下面＃SECTION1，什麼都不會發生。

我完全卡住了。我怎麼能做到這一點，創建一個圓角的div溢出到另一個div？

Answer 1

你應該分開你的定義，以防止奇怪的行爲並節省調試時間。

沒有剩餘CSS爲您提供的元素，你可以看到工作的例子，在所有瀏覽器中提到的充分測試，使用您的定義爲div.menu_buttons：

看到這個Working Example!

CSS

.curved { 
    -moz-border-radius:10px;  /* Firefox */ 
    -webkit-border-radius:10px;  /* Safari and chrome */ 
    -khtml-border-radius:10px;  /* Linux browsers */ 
    border-radius:10px;    /* CSS3 */ 
    behavior:url(border-radius.htc) /* Internet Explorer */ 
} 

.menu_buttons { 
    position:relative; 
    top: 20px; 
    margin-left: 10px; 
    width: 85px; 
    height: 60px; 
    float:left; 
    vertical-align: middle;  
    cursor: pointer; 
    text-align: center; 
    font: 0.9em Arial, Helvetica, sans-serif; 
} 

實例HTML

<div class="menu_buttons curved">.menu_buttons element</div> 

下載border-radius.htc，並查看CSS curved corner Demos and Page。

---

測試的

的Windows XP Profissionalversão2002 Service Pack 3的

• 的Internet Explorer 8.0.6001.18702
• 歌劇11.62
• 火狐3.6.16
• Safari瀏覽器5.1.2
• Google Chrome 18.0.1025.168 m
• K-Meleon 1.5。4

Windows 7家庭版Service Pack 1

• 的Internet Explorer 9.0.8112.164211C
• 歌劇11.62
• 火狐12.0
• 的Safari 5.1.4
• 谷歌瀏覽器18.0.1025.168 m

Linux操作系統Ubuntu 12.04

• 火狐12.0
• 鉻18.0.1025.151（開發版本的Linux 130497）

---

EDITED

相關OP的評論關於強制家電CSSposition。

Working example對於帶圓角的div 否position設置！

---

EDITED

最後的修正後的一些閒聊是CSS position爲元素的包裝，然後將元素自我的適當聲明。

Fiddle Example與正確的CSS聲明！