0

I find the below code can run perfectly on IE8,IE9 and firefox,but can not run well on IE7,the up arrow can not show up,why?

CSS:

.arrow_box {
    position: relative;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 30px;
    left: 50%;
    margin-left: -30px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 36px;
    left: 50%;
    margin-left: -36px;
}

HTML:

<br/>
<br/>
<br/>
<div class="arrow_box"><h1 class="logo">css arrow please!</h1></div>
Harim
  • 31
  • 1
  • 7

1 Answers1

3

:before and :after selectors are not supported on IE7.

You would either have to change your CSS to not use :before and :after, or you can use a js shiv that will basically emulate the behavior of those selectors using javascript. Here's a post about how to do that.

Community
  • 1
  • 1
jbarnett
  • 984
  • 5
  • 7