html - 跨浏览器问题对齐 div 和项目符号样式

Question

我有一些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和ie中，与firefox相比，div的子弹大小更小，甚至在带有.clr类的div旁边的子弹和span之间的空间是与firefox相比，我希望它们在浏览器中保持一致......任何解决方法请......

Answer 1

正如我在评论中所说，

不同的浏览器在默认样式上可能会有一点差异。使用Normalizer它可能会对您有所帮助。

Answer 2

不同的浏览器有不同的默认值。在 CSS 的开头使用以下 CSS 重置所有内容：

*{
  margin:0px;
  padding:0px;
 }