chrome,firefox,safari,css的问题，为什么设置了高度height:50px;chrome差很多呢？firefox和safari一样，有没有具体写法，谢谢
<div class='tests'>???</div>
.tests{
font-size: 0;
height: 55px;
background-color: #262626;
padding-left: 20px;
display: table;
box-sizing: border-box;
width: 100%;
}
<body style="margin:0; padding: 0;">
<div id="box" style="height:55px; background: #0000FF; width:100%; flloat:left; margin: 0; padding: 0;color: #fff;">123</div>
</body>
这种一般我觉得还是要自己学会解决才是王道，本来问题不难。不同的你把开发者工具打开一看啥都清楚了。
文字自动换行和行高以及盒子高度无主要关系，但是固定高度的时候，文字太多会溢出。line-height指的是行高，可以决定盒子高度能分配几行文字。
自动换行方法：
div{
word-wrap: break-word;
//word-break设置强行换行;normal 亚洲语言和非亚洲语言的文本规则，允许在字内换行
word-break: normal;
}
文字自动换行和行高以及盒子高度无主要关系，但是固定高度的时候，文字太多会溢出。line-height指的是行高，可以决定盒子高度能分配几行文字。
自动换行方法：
div{
word-wrap: break-word;
//word-break设置强行换行;normal 亚洲语言和非亚洲语言的文本规则，允许在字内换行
word-break: normal;
}
用对应的浏览器的开发者工具查看一下（F12），可以找出问题
用浏览器的控制台F12 ，查看元素，比较一下各浏览器的的不同就能发现问题了， 这种写页面样式的之前一般首先要做的就是 重置系统样式，重置完就不会有这种问题了， 建议你搜一些重置样式的资源引用一下