CSS 및 크로스 브라우저 둥근 모서리

크로스 브라우저 둥근 모서리에 대한 솔루션을 구현하려고 시도했지만 데모가 모든 브라우저에서 작동하지만 자신의 코드로 구현하려고하면 모든 브라우저에서 작동합니다. 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>

네비게이션 바에는 내가에 둥근 모서리를 신청하는 것입니다이

여기 내 CSS입니다.

IE8에서는 모든 왼쪽 모서리와 둥근 모서리를 둥글게하고 싶습니다 (IE8 만 제외하고 모두 표시). http://css3pie.com/은 둥근 모서리 IE 8 올바르게 표시하기 위해서는

에서, 둥근 모서리를 가진 요소 있어야 :

출처

2012-04-12 Cynthia

http://www.w3schools.com/cssref/css3_pr_border-radius.asp - 국경 반경은 IE8과 함께 좋은 재생되지 않습니다. – FiveTools

동작 : url ("border-radius.htc"); 네 모퉁이에서만 작동합니다. IE8에서 둥근 모서리를 얻는 유일한 방법은 http://snook.ca/archives/html_and_css/rounded_corners_experiment_ie/입니다. – kmb64

안녕하세요, 내 대답을보고 문제가 있으면 알려주세요. – w3uiguru

이 문제는 사용 CSSPIE 의해 유래 다른 사람들에 의해 해결되었다

position: relative;

이 CSS에 설정되었습니다.

은 다음을 참조하십시오 또한

CSS rounded corners in IE8

Border Radius for IE8

Border-radius for IE7 & IE8

: http://jc-designs.net/blog/2010/07/getting-border-radius-to-work-in-ie/ (위치에 대한 추가 정보 : 상대 해킹)

말대꾸 라이브러리 콩파 s의 크로스 브라우저 국경 반경을 제공하지만, 나는 IE8

함께 사용 경험이없는

출처

2012-04-12 02:26:21 pepperdreamteam

+1 왜 바퀴를 재발 명해야합니까? 이미 이미 둥근 모서리가 있습니다 !!! 죄송합니다. 저항 할 수 없습니다. 관련 메모에 ... 오늘 나는 소스 의견을 읽었습니다 - Dropbox는 더 이상 ie6를 지원하지 않습니다 ... –

데모

참조 바이올린 : 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 기반 크로스 브라우저 호환성을 위해 모서리를 둥글게

enter image description here

출처

2012-04-12 02:42:50 w3uiguru

CSS 및 크로스 브라우저 둥근 모서리

답변

관련 문제