用css做圆角,成果日下,ie6/7有些问题,放在这里做分享和讨论。

不喜欢吃素的菜鸟 发布于 2013/05/27 15:12
阅读 422
收藏 4

这次css圆角代码是从网上抄来的。以前使用<hr/>标签自己做过。

本次css圆角代码地址:http://www.cnblogs.com/binyong/archive/2009/11/30/1613376.html

有个问题就是,你到ie6/8去运行下就可以看出来了,至今还没有找出原因所在,以前用div套img的时候,div设置了高度宽度,img是高宽100%,在ie8及以下浏览器div会被撑大,多出6个像素(这里可能记错了)。

如果有人知道,麻烦指点下。

代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <script>
            
        </script>
        <style>
            /* 圆角样式*/
            .b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
            .b1,.b8{margin:0 5px;}
            .b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
            .b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
            .b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}
            .color1 .b1,.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .b8,.color1 .contentColor{background-color: #ccc; border-color:#ccc;}
            .color1 .divGroup{background-color: #fff; border: 1px solid #ccc; padding: 0px;}            
            ul{list-style: none; margin: 0px; padding: 0px;}
            li{margin: 1px 0px;}
            .groupFlag{background-color: #ccc;}
            .content{text-align: center; padding: 10px;}
            .ul_firstChild{margin: 3px 5px;}
            
        </style>
    </head>
    <body>
    <div class="sharp color1">
                                           <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
                                           <div class="contentSharp content contentColor">1</div>
                                           <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>   
                                    </div>
                                    
                                    <hr />
                                    单独的测试
        <div id="div_1" style="width: 300px;">
            <ul class="ul">
                <li>
                     <div class="sharp color1">
                           <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
                           <div class="contentSharp content contentColor">2</div>
                           <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>   
                    </div>
                </li>
                <li>
                    <div class="sharp color1">
                        <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
                        <div class="contentSharp content contentColor divGroup">
                            <ul class="ul_firstChild">
                                <li>
                                    <div class="sharp color1">
                                           <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
                                           <div class="contentSharp content contentColor">3</div>
                                           <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>   
                                    </div>
                                </li>
                                <li>
                                    <div class="sharp color1">
                                           <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
                                           <div class="contentSharp content contentColor">4</div>
                                           <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>   
                                    </div>
                                </li>
                                <li>
                                    <div class="sharp color1">
                                           <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
                                           <div class="contentSharp content contentColor">5</div>
                                           <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>   
                                    </div>
                                </li>
                                <li>
                                    <div class="sharp color1">
                                           <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
                                           <div class="contentSharp content contentColor">6</div>
                                           <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>   
                                    </div>
                                </li>
                                <li>
                                    <div class="sharp color1">
                                           <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
                                           <div class="contentSharp content contentColor"7</div>
                                           <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>   
                                    </div>
                                </li>
                                <li>
                                    <div class="sharp color1">
                                           <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
                                           <div class="contentSharp content contentColor">8</div>
                                           <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>   
                                    </div>
                                </li>
                            </ul>
                            <div class="groupFlag">Group</div>
                        </div>
                        <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>   
                    </div>
                    
                    
                    
                </li>
                <li>
                    <div class="sharp color1">
                        <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
                        <div class="contentSharp content contentColor">11</div>
                        <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>   
                    </div>
                </li>
                <li>
                    <div class="sharp color1">
                        <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
                        <div class="contentSharp content contentColor">12</div>
                        <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>   
                    </div>
                </li>
                <li>
                    <div class="sharp color1">
                        <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
                        <div class="contentSharp content contentColor">13</div>
                        <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>   
                    </div>
                </li>
            </ul>
        </div>
    </body>
</html>

加载中
0
用户已屏蔽
用户已屏蔽
ie7 ?  支持了吗?
用户已屏蔽
用户已屏蔽
回复 @ybl_rs : 哦,仔细看下,
不喜欢吃素的菜鸟
不喜欢吃素的菜鸟
我的回复在下面。
0
blindcat
blindcat
头疼啊头疼
不喜欢吃素的菜鸟
不喜欢吃素的菜鸟
的确是头痛。
0
缪斯的情人
缪斯的情人
单纯div的话圆角实现很复杂,而且兼容性在ie6-8下很多问题。如果你非要用div实现,可以看看这里:http://www.malsup.com/jquery/corner/
不喜欢吃素的菜鸟
不喜欢吃素的菜鸟
回复 @缪斯的情人 : 现在没空,我也没去看。 当我把鼠标移动到上面的时候,通过监控工具可以看到发起了很多请求,都是表格图片的请求,一整套很多的。后台返回304状态码。
缪斯的情人
缪斯的情人
回复 @ybl_rs : 没用过,加载大量图片?一个hover效果需要那么多图片吗
不喜欢吃素的菜鸟
不喜欢吃素的菜鸟
之后再看下,现在要忙其他的事情去了。对了,你用过jquery的$("#maingrid").simpleGrid();这个插件没有,这个的效果是一个表格,在ie8及ie8以下,每次鼠标移动到表格上,都会发起请求加载大量图片,然后服务器返回304状态码,最近好多事情要处理,忙死了。
0
不喜欢吃素的菜鸟
不喜欢吃素的菜鸟
ie6/7效果一样的,出现了问题,单独的圆角是正常的(最上面那块),下面是嵌进了一些代码里面,所以出现了问题。
0
不喜欢吃素的菜鸟
不喜欢吃素的菜鸟

引用来自“滔哥”的答案

ie7 ?  支持了吗?
看评论了。
返回顶部
顶部