对 属性 在 ie 中不起作用

Question

我网站的一部分在 IE 中看起来很糟糕，我只是在这里和其他网站搜索 css trikes 或 github 并尝试使用 css hack for IE，但是 css hacks 对我的问题不起作用。 here 是我的网站

你可以在我截取的屏幕截图中看到箭头问题，如果你在 chrome 或 firefox 中打开网站，这部分工作正常，

这是我的 CSS 这部分的代码

 div.rightpanel ol.rlists li.active div div {
    background-color : #f8f8f8 !important;

}
div.rightpanel ol.rlists li.active a:before{
    display          : block;
    content          : '';
    background-image : url('../images/summary-box-arrows.png');
    background-repeat: no-repeat;
    width            : 15px;
    height           : 49px;
    z-index          : 50;
    left             : -12px;
    position         :absolute;
}
 /*----------------------------------position for firefox : firefox hack------------------------------------*/  
 @-moz-document url-prefix() {
  div.rightpanel ol.rlists li.active a:before {
    left                :0px;
    top                 : 15px;
    right               : 200px;
   }
 }
/*----------------------------------position for IE : internet explorer hack------------------------------------*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 div.rightpanel ol.rlists li.active a:before{
    left                :0px;
    top                 : 15px;
    right               : 200px;
 }

 }  

ol.rlists li.active a.ralist1:before{
    background-position: 0 0;
 }

这是我的 HTML 这部分的代码

<div class="best row">
        <div class="title-pack col-md-12">
            <span class=" pull-left line visible-sm-block"></span>
            <span class="pull-left visible-sm-block tittle-style">ترین ها</span>
            <span class=" pull-right line visible-sm-block"></span>
        </div>
        <div class="best-box col-md-12">




        <div class="pull-right mh250 rightpanel">
                <ol class="cover pull-right mr1 rlists">
                    <li onclick=" document.getElementById('train').style.top = '0px'; " class="rlist1 active">
                        <a class="ralist1">
                            <div class="ritem1">
                                <span class="bullet"></span>
                                <div class="rlist1ltem1">
                                    <h4 class="item1text">تازه ترین ها</h4>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li onclick=" document.getElementById('train').style.top = (624 * -1) + 'px' ; " class="rlist1">
                        <a class="ralist1">
                            <div class="ritem1">
                                <span class="bullet"></span>
                                <div class="rlist1ltem1">
                                    <h4 class="item1text">پرفروش ترین ها</h4>
                                </div>

                            </div>
                        </a>
                    </li>
                    <li onclick=" document.getElementById('train').style.top = (1309 * -1) + 'px' ; " class="rlist1">
                        <a class="ralist1">
                            <div class="ritem1">
                                <span class="bullet"></span>
                                <div class="rlist1ltem1">
                                    <h4 class="item1text">محبوب ترین ها</h4>
                                </div>

                            </div>
                        </a>
                    </li>

                </ol>
            </div>
            <div class="pull-right  overhid lcontent">
                <div class="">
                    <section class="overhide rel slideshow">
                        <ul class="abs train" id="train" style="top: 0px;">
                            <li class="cover col-md-12">
                                <div class="col-md-12">
                                    <div class="content-best">
                                        <div class="img1">
                                            <h4>پاییز فصل آخر سال است</h4>
                                            <p>1300 تومان</p>
                                        </div>
                                        <div class="img2">
                                            <h4>سرخ و سفید</h4>
                                            <p>1000 تومان</p>

                                        </div>
                                        <div class="img3">
                                            <h4>تراژدی تنهایی</h4>
                                            <p>1700 تومان</p>
                                        </div>
                                    </div>
                                    <div class="content-best">
                                        <div class="img4">
                                            <h4>نبودنت</h4>
                                            <p>1300 تومان</p>
                                        </div>
                                        <div class="img5">
                                            <h4>شوری در سر</h4>
                                            <p>1000 تومان</p>

                                        </div>
                                        <div class="img6">
                                            <h4>پاییز فصل آخر سال است</h4>
                                            <p>1300 تومان</p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="cover col-md-12">
                                <div class="col-md-12">
                                    <div class="content-best">
                                        <div class="img1">
                                            <h4>پاییز فصل آخر سال است</h4>
                                            <p>1300 تومان</p>
                                        </div>
                                        <div class="img2">
                                            <h4>سرخ و سفید</h4>
                                            <p>1000 تومان</p>

                                        </div>
                                        <div class="img3">
                                            <h4>تراژدی تنهایی</h4>
                                            <p>1700 تومان</p>
                                        </div>
                                    </div>
                                    <div class="content-best">
                                        <div class="img4">
                                            <h4>نبودنت</h4>
                                            <p>1300 تومان</p>
                                        </div>
                                        <div class="img5">
                                            <h4>شوری در سر</h4>
                                            <p>1000 تومان</p>

                                        </div>
                                        <div class="img6">
                                            <h4>پاییز فصل آخر سال است</h4>
                                            <p>1300 تومان</p>
                                        </div>
                                    </div>

                            </li>
                            <li class="cover col-md-12">
                                <div class="col-md-12">
                                    <div class="content-best">
                                        <div class="img1">
                                            <h4>پاییز فصل آخر سال است</h4>
                                            <p>1300 تومان</p>
                                        </div>
                                        <div class="img2">
                                            <h4>سرخ و سفید</h4>
                                            <p>1000 تومان</p>

                                        </div>
                                        <div class="img3">
                                            <h4>تراژدی تنهایی</h4>
                                            <p>1700 تومان</p>
                                        </div>
                                    </div>
                                    <div class="content-best">
                                        <div class="img4">
                                            <h4>نبودنت</h4>
                                            <p>1300 تومان</p>
                                        </div>
                                        <div class="img5">
                                            <h4>شوری در سر</h4>
                                            <p>1000 تومان</p>

                                        </div>
                                        <div class="img6">
                                            <h4>پاییز فصل آخر سال است</h4>
                                            <p>1300 تومان</p>
                                        </div>
                                    </div>
                                </div>


                            </li>

                        </ul>
                    </section>
                </div>  
            </div>





        </div>
         <div style="clear:both;"></div>
    </div>  

</div>

谁能帮我解决这个问题？

Answer 1

你能试试下面的修复方法吗，

在规则中添加display: block; -

div.rightpanel ol.rlists li a {
  text-decoration: none;
  position: relative;
    display: block;
}

此外，我认为您可以在“---internet explorer hack---”中避免以下规则-

div.rightpanel ol.rlists li.active a:before{
    left                :0px;
    top                 : 15px;
    right               : 200px;
}

您使用的是哪个版本的 IE？