Question

如何在ie8浏览器中使圆角工作我有一个div与背景图像属性附加到它.. 我想用css颜色替换背景图像... 我添加了背景颜色，但不知道如何制作圆角并使其仅占据容器的一半...... 我用彩色图像替换，使我的应用程序更快... 你可以告诉我如何修复它，提供下面的代码......

<span class="position-ind all-values">
    <div class="color-ind">--outer container
        <div class="all-values-light"/></div>--inner container
    </div>

    .gen-position-green-row .all-values .all-values-light{
        /*background-image: url('../img/positionIndicator_glow.png');*/
        background-color: white;
        border: solid 1px;
      /* the border will curve into a 'D' */  
      border-radius: 10px 40px 40px 10px;
  -webkit-border-radius: 10px 40px 40px 10px;
  -moz-border-radius: 10px 40px 40px 10px;
    }

Answer 1

使用css3pie或iecss3只需将文件包含为

.gen-position-green-row .all-values .all-values-light{        
        background-color: white;
        border: solid 1px;      
        border-radius: 10px 40px 40px 10px;
        -webkit-border-radius: 10px 40px 40px 10px;
        -moz-border-radius: 10px 40px 40px 10px;
        behavior: url("../css/PIE.htc");
}

Answer 2

以下是针对跨浏览器支持的良好解决方案 http://jquery.malsup.com/corner/

查看 jquery.corner.js ，了解不同风格角落的 jquery 解决方案。

HTML：

<div id='ss' style='height:50px;weight:80x;background-color:red;'>Your content</div>

JS：

$('#ss').corner("10px");

注意：不要忘记下载并添加 jquery.corner.js ，

Answer 3

PIE它完美适用于IE7。

请注意，在某些服务器上它不会工作。然后你必须像这样在CSS中包含PHP

（从源代码到php文件的路径并从我的网站中复制形式..）通常你会在CSS中包含HTC ...这对我在我的在线服务器本地工作不起作用。但是，当我加入php时，它是完美的

.container {
z-index: 1;
top:0;
margin: 0 auto;
background: #ffffff;
border: 1px solid #efefef;
width: 970px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 0px 10px;
-moz-box-shadow: #666 0px 0px 10px;
box-shadow: #666 0px 0px 10px;
behavior: url('assets/css/PIE.php');
}

ie8浏览器中的圆角工作

3 个答案: