IE中的圆角div（6/7）

Question

Here's the code for rounded div. 这是舍入div的代码。 Everything works fine except IE(6/7), even in IE(8/9) it's pretty good, and obviously other browsers seem nice on the rounded div. 除了IE（6/7）之外，其他所有东西都可以正常工作，即使在IE（8/9）中也不错，而且显然其他浏览器在div上也不错。 Described later after the code. 后面的代码介绍。

html code: 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 code: 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;    
}

The images are here: rounded div's images 图片在这里：圆角div的图片

Now it occurs only in IE(6/7). 现在，它仅在IE（6/7）中发生。 The bottom portion isn't rounded like the top portion. 底部不像顶部那样圆润。 If you test, hope you will find what I asked for. 如果您进行测试，希望您能找到我所要求的。 If any one can find the mistake I will be grateful. 如果有人发现错误，我将不胜感激。

If you have any problem to understand or to get the docs, let me know. 如果您有任何需要理解或获取文档的问题，请告诉我。

Thanks. 谢谢。

Answer 1

Here's a very popular jQuery round corner plugin. 这是一个非常流行的jQuery圆角插件。

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

It's supported in all browsers including IE6. 所有浏览器（包括IE6）都支持该功能。 It draws corners in IE using nested divs (not images). 它使用嵌套的div（不是图像）在IE中绘制角点。 It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). 它还在支持该功能的浏览器（Opera 10.5 +，Firefox，Safari和Chrome）中具有本机边界半径舍入功能。 So in those browsers the plugin simply sets a css property instead. 因此，在这些浏览器中，插件只是设置了一个CSS属性。

Here's How to use it 这是使用方法

You need to include the jQuery and the Corner js script before </body> . 您需要在</body>之前包括jQuery和Corner js脚本。 Then write your jQuery like $('div, p').corner('10px'); 然后像$（'div，p'）。corner（'10px'）;这样编写您的jQuery。 and place before ''. 并放在“”之前。 So your html will look like the below code. 因此，您的html看起来像下面的代码。 Here i'm making round corners for all div and p tags. 在这里，我为所有div和p标签制作了圆角。 If you want to do it for specific id or class then you can do something like $('#myid').corner(); 如果要为特定的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>

Check working example at http://jsfiddle.net/VLPpk/1 在http://jsfiddle.net/VLPpk/1上查看工作示例

Answer 2

This is an excellent tool for cross-browser rounding corners: http://css3pie.com/ 这是跨浏览器圆角的出色工具： http : //css3pie.com/

It's specifically made to handle IE6-8 which doesn't support any css corner rounding. 它是专门为处理不支持任何CSS角圆角处理的IE6-8而设计的。

Answer 3

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

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

IE中的圆角div（6/7）

问题描述

3 个解决方案

解决方案1
2 2011-04-11 17:44:13

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

Here's How to use it 这是使用方法

Check working example at http://jsfiddle.net/VLPpk/1 在http://jsfiddle.net/VLPpk/1上查看工作示例

解决方案2
1 2011-04-11 19:58:23

解决方案3
-6 2012-03-22 11:11:27

IE中的圆角div（6/7）

问题描述

3 个解决方案

解决方案1 2 2011-04-11 17:44:13

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

Here's How to use it 这是使用方法

Check working example at http://jsfiddle.net/VLPpk/1 在http://jsfiddle.net/VLPpk/1上查看工作示例

解决方案2 1 2011-04-11 19:58:23

解决方案3 -6 2012-03-22 11:11:27

解决方案1
2 2011-04-11 17:44:13

解决方案2
1 2011-04-11 19:58:23

解决方案3
-6 2012-03-22 11:11:27