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>

navbar は、丸みを帯びた角を適用しているものです。

IE8では、すべての角が丸くなっていますが、左上と右上の角だけを丸くしたいです（IE8以外では正しく表示されます）。

4

2 に答える 2

7

この問題は、CSSPIEを使用してstackoverflowで他の人によって解決されました：http：//css3pie.com/

丸みを帯びた角がIE8で正しく表示されるようにするには、丸みを帯びた角を持つ要素に次のものが必要です。

position: relative;

cssに設定します。

見る：

IE8のCSSの丸みを帯びた角

IE8の境界半径

IE7およびIE8の境界半径

また： http： //jc-designs.net/blog/2010/07/getting-border-radius-to-work-in-ie/ （位置の詳細については：相対ハック）

sassライブラリCompassは、クロスブラウザの境界線半径も提供しますが、ie8で使用した経験はありません。

于 2012-04-12T02:26:21.517 に答える
0

デモについては、フィドルを参照してください: http://jsfiddle.net/esjzX/1/ 、http://jsfiddle.net/esjzX/1/embedded/result/

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>

スクリーン ショット: クロス ブラウザーの互換性のために角を丸くした純粋な CSS ベース

ここに画像の説明を入力

于 2012-04-12T02:42:50.527 に答える