кросс-браузерная проблема выравнивания div и стиля маркера

У меня есть несколько html, как показано ниже

<div class="wrapper">
    <div class="LItms">
        <div class="clr">
        </div>
        <span>text con</span>
        <ul>
            <li>first</li>
            <li>second</li>
        </ul> 
    </div>
</div>

У меня есть css для них

с относительным относительным положением

.clr {        
    color: red;    
    display: list-item;
    list-style-type: square; 
    font-size: 40px;
    height: 16px;
    width:16px;
    margin-bottom: 17px;
    margin-left: 23px;
}

с относительным положением

.clr {        
    color: red;
    display: list-item;
    list-style-type: square; 
    font-size: 40px;
    height: 16px;
    width:16px;
    margin-bottom: 17px;
    margin-left: 23px;
}

Я попробовал оба из них css, проблема в том, что он отлично работает в fire fox, но в chrome и, т.е. Размер пули для div меньше по сравнению с firefox и даже пространство между пулями и span рядом с div с классом.clr больше по сравнению с firefox, я хочу, чтобы они были выровнены одинаково по сравнению с браузерами... любая работа вокруг plz...........