Fatal编程技术网
  • css/
  • CSS和跨浏览器圆角

CSS和跨浏览器圆角

css internet-explorer-8

CSS和跨浏览器圆角,css,internet-explorer-8,rounded-corners,Css,Internet Explorer 8,Rounded Corners,我一直在尝试实现一个跨浏览器圆角的解决方案，即使演示在所有浏览器中都可以使用，但当我尝试在自己的代码中实现它时，它在除IE8之外的所有浏览器中都可以使用 这是我的CSS： body { background:#ffffff url("images/bg.gif") repeat-x ; font-family:verdana,helvetica,sans-serif ; font-size:12px ; color:#000000 ; margin:0 auto ; padding:0 ;

我一直在尝试实现一个跨浏览器圆角的解决方案，即使演示在所有浏览器中都可以使用，但当我尝试在自己的代码中实现它时，它在除IE8之外的所有浏览器中都可以使用

这是我的CSS：

body    { background:#ffffff url("images/bg.gif") repeat-x ;
font-family:verdana,helvetica,sans-serif ;
font-size:12px ;
color:#000000 ;
margin:0 auto ;
padding:0 ;
}

.clear  { clear:both } /* clears floats */




/* #container defines layout width and positioning */
#container  { width:1000px ;
margin:auto ;
position:relative ;
z-index:inherit ;
zoom:1 ; /* enables rounded corners in IE6 */
}

#header { width:1000px ;
height:75px ;
padding:10px 0px 10px 0px ;
}

    #header-logo    { float:left ;
    width:255px ;
    height:55px ;
    background:url("http://template.sophio.com/images/logo.png") no-repeat ;
    }

    #header-phone   { float:left ;
    display:block ;
    line-height:55px ;
    background:url("images/header-phone-bg.png") no-repeat ;
    background-position:0px 0px ;
    font-size:28px ;
    color:#900 ;
    font-weight:bold ;
    padding-left:50px ;
    margin:0px 0px 0px 120px ;
    }

    #header-right   { float:right ;
    width:225px ;
    }

        #header-right-translate { display:block ;
        text-align:right ;
        background:#ffffff ;
        line-height:26px ;
        }

        #header-right-social    { display:block ;
        text-align:right ;
        background:#FF9 ;
        line-height:24px ;
        margin-top:5px ;
        }

#navbar { width:1000px ;
height:32px ;
background:#9d9687 url("images/header-bg.gif") repeat-x ;
border:1px solid #494437 ;
-moz-border-radius: 11px 11px 0px 0px ;
-webkit-border-radius: 11px 11px 0px 0px ;
border-radius: 11px 11px 0px 0px ;
behavior: url("border-radius.htc");
}
这是我的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Two Column Right</title>
<link rel="stylesheet" href="../style.css" type="text/css" />
</head>

<body>

<div id="container">
    <div id="header">
        <div id="header-logo"></div>
        <div id="header-phone">888-563-2591</div>
        <div id="header-right">
            <div id="header-right-translate">
            [Google Translate Widget Here]         
            </div>
            <div id="header-right-social">
            [Social Icons Widget Here]
            </div>
        </div>
    </div>

    <div id="navbar">text</div>
</div>


</body>
</html>


新的两列右键
888-563-2591
[这里是谷歌翻译小部件]
[此处为社交图标小部件]
文本
导航栏就是我要应用圆角的地方

在IE8中，我的所有角都是圆角，而我只希望左上角和右上角是圆角（它们在IE8之外的所有角中都显示为右）。

此问题已由其他stackoverflow用户通过使用CSSPIE解决：

为了在IE 8中正确显示圆角，具有圆角的元素必须具有：

position: relative;
在css中设置

见：

此外： （有关该职位的更多信息：相对黑客）

sass library Compass还提供跨浏览器边界半径，但我没有在ie8中使用它的经验

Css:
b、 rtop，b.rbotom{显示：块；背景：#FFF}
b、 rtop b，b.RBOTOM b{显示：块；高度：1px；
溢出：隐藏；背景：#9BD1FA}
b、 r1{边距：0 5px}
b、 r2{margin:0 3px}
b、 r3{边距：0 2px}
b、 rtop b.r4，b.RBOTOM b.r4{边距：0 1px；高度：2px}
.rs1{margin:02px}
.rs2{边距：0 1px}
div.container{边距：0 10%；背景：#9BD1FA}
HTML:
你好
用于跨浏览器的圆角




你好
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本
屏幕截图：纯css以圆角为基础，实现跨浏览器兼容性

-border radius与IE8不兼容。行为：url（“border radius.htc”）；仅适用于所有四个角。这可能是你在IE8中获得圆角的唯一其他选择：除了使用图像，请查看我的答案，如果有任何问题，请告诉我。+1为什么要重新发明轮子-它已经获得了很好的圆角！！！对不起，我无法抗拒。另一方面。。。今天我读了一篇源评论-Dropbox不再支持ie6。。。 
Css:

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

.rs1{margin: 0 2px}
.rs2{margin: 0 1px}
div.container{ margin: 0 10%;background: #9BD1FA}

HTML:

<div class="container">
<b class="rtop">
  <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<h1 align="center">Hi!</h1>
    <p>Rounded corners for cross browsers</p>
<b class="rbottom">
  <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>
<br /><br />
<div class="container">
<b class="rtop">
  <b class="rs1"></b> <b class="rs2"></b>
</b>
<h1 align="center">Hi!</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<b class="rbottom">
   <b class="rs2"></b> <b class="rs1"></b>
</b>
</div>