Question

这是舍入div的代码。一切正常，除了IE（6/7），即使在IE（8/9）它也相当不错，显然其他浏览器在圆形div上看起来不错。在代码之后描述。

HTML代码：

<div id="tweets">
    <div id="tweets_text">
        <div id="tweets_text_top">
            <div id="tweets_top_left">
            </div><!--#tweets_text_left-->                          
            <div id="tweets_top_right">
            </div><!--#tweets_text_right-->
        </div><!--#tweets_text_top-->                       
        <div id="tweets_text_middle">
            TeXt HeRe....
        </div><!--#tweets_middle-->                     
        <div id="tweets_text_bottom">
            <div id="tweets_bottom_left">
            </div><!--#tweets_text_left-->                          
            <div id="tweets_bottom_right">
            </div><!--#tweets_text_right-->
        </div><!--#tweets_text_bottom-->                    
    </div><!--#tweets_text-->               
</div><!--#tweets-->

css代码：

#tweets{
    clear: both;
    margin-bottom: 10px;
    padding: 0px;
    border: 0px;
}
#tweets_text{
    width:214px;    
    clear: both;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background: #141414;
}
#tweets_text_top, #tweets_text_bottom{
    width: 214px;
    height: 10px;
    background: #000000;    
    clear: both;    
}
#tweets_top_left{
    height: 10px;
    width: 10px;
    background: url('images/top_left.jpg') no-repeat;   
    float: left;
    clear: left;
}
#tweets_top_right{
    height: 10px;
    width: 10px;
    background: url('images/top_right.jpg') no-repeat;
    float: right;
    clear: right;
}
#tweets_bottom_left{
    height: 10px;
    width: 10px;
    background: url('images/bottom_left.jpg') no-repeat;
    float: left;
    clear: left;
}
#tweets_bottom_right{
    height: 10px;
    width: 10px;
    background: url('images/bottom_right.jpg') no-repeat;
    float: right;
    clear: right;   
}
#tweets_text_middle{    
    width: 200px;
    padding: 7px;
    background: #000000;
    color: #f4f4f4;
    font-size: 12px;    
}

图片在这里： rounded div's images

现在它只在IE（6/7）中出现。底部不像顶部那样是圆形的。如果你测试，希望你会找到我要求的。如果有人能找到错误，我将不胜感激。

如果您有任何问题需要了解或获取文档，请与我们联系。

感谢。

Answer 1

这是一个非常流行的jQuery圆角插件。

http://jquery.malsup.com/corner/

所有浏览器都支持它，包括IE6。它使用嵌套的div（而不是图像）在IE中绘制角点。它还支持浏览器中的原生边界半径舍入（Opera 10.5 +，Firefox，Safari和Chrome）。因此，在这些浏览器中，插件只是设置了一个css属性。

以下是如何使用

您需要在</body>之前包含jQuery和Corner js脚本。然后编写你的jQuery，如$（'div，p'）。corner（'10px'）;放在''之前。所以你的HTML看起来像下面的代码。在这里，我为所有div和p标签制作圆角。如果您想针对特定的ID或类进行操作，那么您可以执行$('#myid').corner();

之类的操作

<body>
    <div class="x"></div>
    <p class="y"></p>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
    <script>$('div, p').corner();</script>
</body>

检查http://jsfiddle.net/VLPpk/1

处的工作示例

Answer 2

这是跨浏览器四舍五入角的绝佳工具：http://css3pie.com/

它专门用于处理IE6-8，它不支持任何css转角。

Answer 3

使用CSS中的代码进行舍入。

border-radius:7px 7px 7px 7px;

IE中的圆角div（6/7）

3 个答案:

http://jquery.malsup.com/corner/

以下是如何使用

检查http://jsfiddle.net/VLPpk/1