html - IE8圆 Angular ，部分div溢出到其他div不可见

Question

我正在尝试创建一些圆 Angular 的 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);

}

.对 Angular 线:

.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 添加到 #section1 下面的 div 时，没有任何反应。

我完全卡住了。我该怎么做，创建一个溢出到另一个 div 的圆 Angular 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 Profissional versão 2002 Service Pack 3

• Internet Explorer 8.0.6001.18702
• 歌剧 11.62
• 火狐 3.6.16
• Safari 5.1.2
• 谷歌浏览器 18.0.1025.168 m
• K-Meleon 1.5.4

Windows 7 家庭版服务包 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
• Chromium 18.0.1025.151(开发人员内部版本 130497 Linux)

---

已编辑

与关于强制应用 CSS position 的 OPs 评论相关。

Working example对于圆 Angular 的 div，未设置 position!

---

已编辑

经过一番交谈后的最终解决方案是为元素包装器和元素本身正确声明 CSS position。

Fiddle Example使用正确的 CSS 声明!