Error with border radius Chrome

Navigation
5

I have the following structure using bootstrap and fontawesome 

.social-rodape{
    margin-top: 35px;
}

.social-rodape ul li a {
    padding: 10px 12px;
    border-width: 0;
    color: #37a8ab;
    font-size: 30px;
}
.social-rodape ul li:hover a{
    background-color: #37a8ab;
    color: #fff;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script><sectionclass="container">
 <div class="col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-12 social-rodape">
                <ul class="list-unstyled list-inline">
                    <li><a href="#" class="img-circle"><i class="fa fa-facebook-square"></i></a>
                    </li>
                    <li><a href="#" class="img-circle"><i class="fa fa-instagram"></i></a>
                    </li>
                    <li><a href="#" class="img-circle"><i class="fa fa-twitter"></i></a>
                    </li>
                    <li><a href="#" class="img-circle"><i class="fa fa-google-plus"></i></a>
                    </li>
                    <li><a href="#" class="img-circle"><i class="fa fa-youtube"></i></a>
                    </li>
                </ul>
            </div>
            <!--col-md-4 col-sm-4 col-xs-12 social-rodape-->
</section>

But hoping there was a circle when hovering over the icons looks like this:

This only happens in Google Chrome other browsers such as Internet Explorer and Firefox are normal.

Does anyone know how to solve this problem?

    
asked by anonymous 07.01.2015 / 17:43

1 answer

4

Try to put display:inline-block . 

.social-rodape ul li a {
    padding: 10px 12px;
    border-width: 0;
    color: #37a8ab;
    font-size: 30px;
    display: inline-block
}
    
07.01.2015 / 18:06
Extend the PHPWord class in CI - class not found PHP: elements with and without explicit keys in the same array