IE8의 CSS 둥근 모서리
IE8에서 둥근 모서리에 문제가 있습니다. 성공하지 못한 채 몇 가지 방법을 시도했습니다.
내 코드는 다음과 같습니다.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
padding: 2px;
margin: 2px;
color: #505050;
line-height: normal;
}
p {
margin: 4px;
}
.categoryheading3 {
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
background-color: #297BB6;
color: #FFFFFF;
font-size: 16px;
font-weight: 700;
padding: 8px 0;
text-align: center;
margin: 0px;
}
.leftcolumn {
width: 174px;
padding: 8px;
float: left;
display: inline-block;
background-color: transparent;
/*--min-height: 500px*/
overflow: hidden;
}
.lefttop {
display: inline-block;
width: inherit;
margin: 0 5px 2em 0;
float: left;
width: 160px;
background-color: #FFFFFF;
border: 2px solid #297BB6;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="leftcolumn">
<div class="lefttop">
<H4 class="categoryheading3">Heading</H4>
<p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text </p>
</div>
</div>
</body>
</html>
Firefox에서 다음을 생성합니다.
그러나 이것은 IE8에서 :
누군가 팁이 있으면 매우 감사하겠습니다!
편집 : Joseph은 pie.htc를 사용하도록 제안하여 도움을 주었지만 여전히이 요소가 작동하지 않는 문제로 어려움을 겪고 있습니다.
.categoryheading3 {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
behavior: url(PIE.htc);
background-color: #297BB6;
color: #FFFFFF;
font-size: 16px;
font-weight: 700;
padding: 8px 0;
text-align: center;
margin: 0px;
}
Internet Explorer (버전 9 이하)는 기본적으로 둥근 모서리를 지원하지 않습니다.
마술처럼 당신을 위해 추가 할 놀라운 스크립트가 있습니다 : CSS3 PIE .
나는 놀라운 결과와 함께 그것을 많이 사용했습니다.
IE8의 둥근 모서리
인터넷 익스플로러 8 (및 이전 버전) 하지 않는 둥근 모서리를 지원 하지만 거기에 당신이 고려할 수 있습니다 몇 가지 다른 솔루션 :
Use Rounded Corners
Imagesinstead (this generator is a good resource)Use a
jQuery Corner pluginfrom hereUse a very good script called
CSS3 PIEfrom here (Pro's & Con's here)Checkout
CSS Juicefrom hereAnother good script is
IE-CSS3from here
Even though CSS PIE is the most popular solution, I'm suggesting you to review all other solutions and choose what works best for your needs.
Hope it was useful. Good Luck!
I didnt know about css3pie.com, a very useful site after seeing this post:
But what after testing it out it didnt work for me either. However I found that wrapping it in the .PHP file worked fine. So instead of:
behavior: url(PIE.htc);
use this:
behavior: url(PIE.php);
I put mine in a folder called jquery, so mine was:
behavior: url(jquery/PIE.php);
So goto their downloads or get it here:
http://css3pie.com/download-latest
And use their PHP file. Inside the PHP file it explains that some servers are not configured for proper .HTC usage. And that was the problem I had.
Try it! I did, it works. Hope this helps others out too.
http://fetchak.com/ie-css3/ works for IE 6+. Use this if css3pie doesn't work for you.
PIE.htc worked for me great (http://css3pie.com/), but with one issue:
You should write absolute path to PIE.htc. It hasn't worked for me when I used relative path.
As Internet Explorer doesn't natively support rounded corners. So a better cross-browser way to handle it would be to use rounded-corner images at the corners. Many famous websites use this approach.
웹에서 둥근 이미지 생성기를 찾을 수도 있습니다. 이러한 링크 중 하나는 http://www.generateit.net/rounded-corner/ 입니다 .
참고 URL : https://stackoverflow.com/questions/7077331/css-rounded-corners-in-ie8
'IT Share you' 카테고리의 다른 글
| 컴파일 타임에 엔디안 결정 (0) | 2020.12.11 |
|---|---|
| Python 클래스 메서드의 사용 사례의 예는 무엇입니까? (0) | 2020.12.11 |
| MySQL에서 CASE..WHEN을 올바르게 사용하는 방법 (0) | 2020.12.11 |
| Windows 10 개발자 미리보기에서 Bash를 활성화하는 방법은 무엇입니까? (0) | 2020.12.11 |
| InnoDB는 600MB 파일, MyISAM을 몇 분 안에 가져 오는 데 1 시간 이상 걸립니다. (0) | 2020.12.10 |