chrome,firefox,safari,css的问题,谢谢

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>

5个回答

这种一般我觉得还是要自己学会解决才是王道,本来问题不难。不同的你把开发者工具打开一看啥都清楚了。

文字自动换行和行高以及盒子高度无主要关系,但是固定高度的时候,文字太多会溢出。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 ,查看元素,比较一下各浏览器的的不同就能发现问题了, 这种写页面样式的之前一般首先要做的就是 重置系统样式,重置完就不会有这种问题了, 建议你搜一些重置样式的资源引用一下

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问