CSS3가 IE에서만 안되네요 왜그런지?
본문
CSS 메뉴가 상당히 멋지게 만들어진것들이 많은데요,
크롬, 사파리, 파이어폭스 등에서는 아무런 문제없이 잘되던데
웹페이지에 적용하려는데 IE에서만 잘안되더라구요.
IE에서 아래와 처리되도록 할 수 있는 방법 어떤것이 있을지?
IE를 무시하기엔 너무 글씨가 안보여서
HTML
<head>
<link rel="stylesheet" type="text/css" href="./css/menu.css"/>
</head>
<ul id="menu-bar">
<li><a href="#">Products</a>
<ul>
<li><a href="#">Products Sub Menu 1</a></li>
<li><a href="#">Products Sub Menu 2</a></li>
<li><a href="#">Products Sub Menu 3</a></li>
<li><a href="#">Products Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Services Sub Menu 1</a></li>
<li><a href="#">Services Sub Menu 2</a></li>
<li><a href="#">Services Sub Menu 3</a></li>
<li><a href="#">Services Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
CSS
#menu-bar {
margin: 0px 0px 0px 0px;
padding: 6px 6px 0px 6px;
height: 34px;
line-height: 100%;
border-radius: 24px;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
box-shadow: 2px 2px 3px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
background: #8B8B8B;
background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
background: -moz-linear-gradient(top, #A9A9A9, #7A7A7A);
border: solid 1px #6D6D6D;
}
#menu-bar li {
margin: 0px 6px 0px 6px;
padding: 0px 0px 6px 0px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: bold;
font-family: arial;
font-style: normal;
font-size: 12px;
color: #E7E5E5;
text-decoration: none;
display: block;
padding: 8px 20px 8px 20px;
margin: 0;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
text-shadow: 2px 2px 3px #000000;
}
#menu-bar .active a, #menu-bar li:hover > a {
background: #0399D4;
background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
background: -moz-linear-gradient(top, #EBEBEB, #A1A1A1);
color: #444444;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #0399D4 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
background: -moz-linear-gradient(top, #04ACEC, #0186BA) !important;
color: #FFFFFF !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 2px 2px 2px #FFFFFF;
}
#menu-bar ul {
background: #DDDDDD;
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
background: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 30px;
left: 0;
border: solid 1px #B4B4B4;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 3px #222222;
-moz-box-shadow: 2px 2px 3px #222222;
box-shadow: 2px 2px 3px #222222;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:10px 0px 10px 15px;
color:#424242 !important;
font-size:12px;
font-style:normal;
font-family:arial;
font-weight: normal;
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
}
답변 2
ie10부터는 상당히 지원합니다.
ie9이하는 대부분 안된다고 보시면 됩니다.
브라우저 마다 지원하는 html css 스펙이 달라서 그렇습니다.
그 소스는 css3 의 스펙으로 제작되서 그런듯 하네요~
답변을 작성하시기 전에 로그인 해주세요.
