带有背景图像的有序列表在IE10，IE11中无法正确显示

Question

I have a following HTML code on my webpage to create a list

<ul class="rightdivul">
               <li id="linkedinli">
                   <a href="https://www.linkedin.com/in/xxxxxx">www.linkedin.com/in/xxxxxx</a>
               </li>



               <li id="twitterli">
                   <a href="https://twitter.com/xxxxx">@xxxxxx</a>
               </li>

           </ul>

I am using the following CSS to style this:

ul.rightdivul {
text-align: left;
list-style-type: none;
font-weight: 300;
padding-left: 20px;
font-weight: 300;
color: #23313E;

}

#linkedinli {
background: url(images/Linkedin.svg) no-repeat;
padding-left: 30px;
margin-bottom: 15px;


}

#twitterli {
background: url(images/Twitter.svg) no-repeat;
padding-left: 30px;
margin-bottom: 3px;

}

In Chrome, Firefox, Opera, Safari, Edge the background image is displayed correctly before the text. However in IE10, IE11 the background image is overlapping the text. Am I missing something here?

Answer 1

Try writing this:

background: url(/*your url*/);
background-repeat: no-repeat;

Instead of this:

background: url(/*your url*/) no-repeat;