ie8에서
본문
혹시 아래중 ie8에서 인식 안되는 코드가 있는지요...
백그라운드가 안되고 글자크기가 안먹히네요,,,길어서 죄송합니다.
body{color:ffffff;}
h2, h3{letter-spacing:0.25em;text-transform:uppercase;font-weight:600;}
p{line-height:1.6em;}
.l-content{margin:0 auto;}
.l-box{padding:0.5em 2em;}
.pure-menu{box-shadow:0 1px 1px rgba(0,0,0, 0.10);}
.banner{background:transparent url('http://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg') 0 0 no-repeat fixed;text-align:center;background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg', sizingMethod='scale');height:200px;width:100%;margin-bottom:3em;display:table;}
.banner-head{display:table-cell;vertical-align:middle;margin-bottom:0;font-size:2em;color:white;font-weight:500;text-shadow:0 1px 1px black;}
.pricing-tables,
.information{max-width:980px;margin:0 auto;}
.pricing-tables{margin-bottom:3.125em;text-align:center;}
.pricing-table{border:1px solid #ddd;margin:0 0.5em 1em;padding:0 0 2em;}
.pricing-table-free .pricing-table-header{background:#519251;}
.pricing-table-biz .pricing-table-header{background:#2c4985;}
.pricing-table-header{width:135px;height:62px;background:#669911;color:#fff;}
.pricing-table-header h2{margin:0;padding-top:1.2em;padding-left:10px;font-size:1em;font-weight:normal;}
.pricing-table-header2{width:135px;height:62px;background:#669911;color:#fff;}
.pricing-table-header2 h2{margin:0;padding-top:1.2em;padding-left:10px;font-size:1em;font-weight:normal;}
.pricing-table-header3{width:135px;height:64px;background:#669911;color:#fff;}
.pricing-table-header3 h2{margin:0;padding-top:1.2em;padding-left:10px;font-size:1em;font-weight:normal;}
.pricing-table-header4{width:158px;height:62px;background:#669911;color:#fff;}
.pricing-table-header4 h2{margin:0;padding-top:1.2em;padding-left:10px;font-size:1em;font-weight:normal;}
.pricing-table-header5{width:158px;height:94px;background:#669911;color:#fff;}
.pricing-table-header5 h2{margin:0;padding-top:2.8em;padding-left:10px;font-size:1em;font-weight:normal;}
.pricing-table-header6{width:158px;height:94px;background:#669911;color:#fff;}
.pricing-table-header6 h2{margin:0;padding-top:2.8em;padding-left:10px;font-size:1em;font-weight:normal;}
.pricing-table-price{font-family: Arial, Helvetica, sans-serif;font-size:2em;margin:0.2em 0 0;font-weight:100;padding:10px 20px 10px 50px;}
.pricing-table-price span{display:block;text-transform:uppercase;font-size:0.2em;padding-bottom:2em;font-weight:400;color:rgba(255, 255, 255, 0.5);*color:#fff;}
.pricing-table-list{list-style-type:none;margin:0;padding:0;text-align:center;}
.pricing-table-list li{padding:10px 0 10px 0;background:#f8f8f8;border-bottom:1px solid #e7e7e7;height:10px;}
.pricing-table-list2 li{padding:10px 0 10px 0;background:#f8f8f8;border-bottom:1px solid #e7e7e7;height:10px;width:158px}
.button-choose{border:1px solid #ccc;padding:3px;background:#fff;color:#333;font-weight:bold;position:relative;bottom:0em;}
.information-head{color:black;font-weight:500;}
.footer{background:#111;color:#888;text-align:center;}
.footer a{color:#ddd;}
@media(min-width:767px){.banner-head{font-size:4em;}
.pricing-table{margin-bottom:0;}
}
@media (min-width:480px){.banner{height:400px;}
.banner-head{font-size:3em;}
}
답변 2
미디어쿼리는 ie8에서 사용이 안되므로
스크립트를 이용해서 직접 불러오는 방식으로 하셔야 할 듯 보입니다.
http://blog.naver.com/ograni/220583231677
여기와 같은 내용을 참조해 보세요.
박스쉐도우 안되요 둥근모서리도 안되고 미디어쿼리 안되요
그냥 ie8 css 공부를 하시는게 좀더 빠를듯.. 아 혹은 ie8핵을 써보시는것도 괜찮죠 !ㅎㅎ