0

I have a problem with pseudo-elements (: before,: after,: last-child) in the IE7 browser.

In fact I wanted to draw a tree that looks like this capture (IE11):

enter image description here

but when I execute my index on (IE7) gives me rendering wrong :

enter image description here

For information i have already used Selectivizr (It’s a JavaScript library that allows you to take advantage of CSS3 selectors ) but not working for me !

This code is just an example looks like my project structure where i use (struts2, dojo): 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tree</title>
        <!--[if (gte IE 6)&(lte IE 8)]>
          <script type="text/javascript" src="selectivizr.js"></script>
        <![endif]-->
        <link href="demo1.css" rel="stylesheet"> 
    </head>
    <body>
        <div class="test">
            <div>
                <a href="#"> + </a>
                <a href="#"> Label A </a>
            </div>
            <ul class="recherche_non_rendu">
                <li>
                    <div class="test">
                        <div>
                            <a href="#"> + </a>
                            <a href="#"> Label A1 </a>
                        </div>
                        <ul class="recherche_non_rendu">

                            <li>
                                <div class="test">
                                    <div>
                                        <a href="#"> + </a>
                                        <a href="#"> Label A11 </a>
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="test">
                                    <div>
                                        <a href="#"> + </a>
                                        <a href="#"> Label A12 </a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </body>
</html>

And my style css : 

.test ul {
  padding:0;
  margin: 0; 
  margin-left:6px;
  list-style:none;
  background: #fff;
  color:#000;
  position:relative;
}

.test ul:before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid #000;
}

.test li {
  margin:0;
  padding:0 16px; 
  line-height:2em; 
  font-weight:bold;
  position:relative;
}

.test li:before {
  content:"";
  display:block;
  width:10px; 
  height:0;
  border-top:1px solid #000;
  margin-top:-1px; 
  position:absolute;
  top:1em; 
  left:0;
}

.test li:last-child:before {
  background:white; 
  height:auto;
  top:1em; 
  bottom:0;
}

Any help will be appreciated.

enhzflep
  • 12,927
  • 2
  • 32
  • 51
user3535890
  • 13
  • 1
  • 6
  • 3
    Selectivizr allows you to use pseudo-_selectors_. It doesn't allow you to use pseudo-_elements_ in browsers that don't support them. – Turnip Oct 24 '16 at 15:31
  • Why do you need to support IE7?? ... Its stats is like 0.5% ... The "tree" look okay without, so just leave it and let those 1 in 200 to not see the pseudo. – Asons Oct 24 '16 at 17:30
  • Also, [MS stopped their support](https://support.microsoft.com/en-us/lifecycle/search?sort=PN&alpha=internet%20explorer) on IE7/8 on the 16th of January 2016 so why should you support it? – Asons Oct 24 '16 at 17:37
  • Indeed, I am obliged to use IE7 in my project, this one is just example looks like what I wanted to do. Now the question is you are there for an alternative solution in which I have a tree with the same result that I want without using these selectors ? – user3535890 Oct 25 '16 at 07:56

0 Answers0