为什么浏览器会多渲染几个标签出来

Question

<ul class="_user_title">
    <li>
        <a class="_user_title_link _user_title_link_active"" href="">我的窝    
    </a>
    </li>
    <li>
        <a class="_user_title_link"" href="">我的游记</a>
    </li>
    <li>
        <a class="_user_title_link"" href="">我的问答</a>
    </li>
    <li>
        <a class="_user_title_link"" href="">我的足迹</a>
    </li>
    <li>
        <a class="_user_title_link"" href="">我的点评</a>
    </li>
    <li>
        <a class="_user_title_link"" href="">我的结伴</a>
    </li>
    <li class="_user_title_more">
        <a class="_user_title_link">
            更多<i class="_user_title_more_icon"><i>
        </a>
    </li>
</ul>

如上代码。在最后一个li标签想给一个小图标（下箭头）css如下

._user_title_more i{
    display: inline-block;
    width: 12px;
    height: 7px;
    background-image: url(../images/user/ico_sprite_v8.png);
    background-position: -93px -60px;
    margin-left: 5px;
    vertical-align: middle;
}

为什么浏览器会渲染出这种效果：

浏览器上效果：

为什么会多出来3个i标签？class为_user_title_more在页面没有重复。也找到了办法解决，可想问一下原因？

Answer 1

<li class="_user_title_more">
    <a class="_user_title_link">
        更多<i class="_user_title_more_icon"></i>
    </a>
</li>