Chrome，Safari和Firefox中的内嵌块和行高渲染方式不同
锥be
我设置code标签样式如下：
code {
display: inline-block;
white-space: no-wrap;
background: #fff;
font-size: .8em;
line-height: 1.5em;
color: #555;
border: 1px solid #ddd;
-webkit-border-radius: 0.4em;
-moz-border-radius: 0.4em;
-ms-border-radius: 0.4em;
-o-border-radius: 0.4em;
border-radius: 0.4em;
padding: 0 .3em;
margin: -1px 0;
overflow: hidden;
background-clip: padding-box;
-webkit-background-clip: padding-box;
}
这是它呈现的方式
- Safari（正确）
- 镀铬（未正确对齐）
- Firefox（未正确对齐）
我觉得很奇怪，尤其是Chrome和Safari的渲染方式不同。在这里可以做些什么使垂直对齐方式回到与普通文本相同的基线？
博杰德拉·拉尼雅（Bhojendra Rauniyar）
您也可以使用vertical-align: middle;代替行高。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Chrome和Firefox中不同的行高
- 2
Chrome和Firefox中的行高不同
- 3
Chrome显示加载gif的方式与Safari和Firefox不同
- 4
Javascript-if（...）在Firefox和Safari中的评估方式不同
- 5
Chrome/Edge 和 Firefox 中的不同图像渲染
- 6
CSS网格：网格模板行自动在Safari，Firefox和Chrome中显示不同的结果
- 7
内嵌块与Chrome中容器的边框重叠
- 8
Chrome和Firefox中的Heights呈现方式不同
- 9
jQuery：first和.first（）在Chrome / Safari和FireFox / IE8中的行为不同
- 10
jQuery：first和.first（）在Chrome / Safari和FireFox / IE8中的行为不同
- 11
svg 不同的渲染结果在 chrome 和 safari 中具有相同的 linearGradient id
- 12
网页在Firefox中的显示方式与我在Chrome和IE中获得的所需设计不同
- 13
字体在Chrome和Firefox中显示不同
- 14
chrome 和 Firefox 中的不同显示
- 15
Rems在Chrome和Firefox之间呈现不同的呈现方式
- 16
Chrome和Firefox对DST时间无效的处理方式不同
- 17
Bootstrap选择在Firefox和Chrome中呈现的方式有所不同
- 18
边框折叠在chrome和firefox中的工作方式不同
- 19
Flexbox div在Chrome和Firefox中的拉伸方式有所不同
- 20
为什么此 PNG 在 Firefox 和 Chrome 中的显示方式不同？
- 21
在Chrome和Firefox中，嵌套在具有明确高度的列flex容器中的行flex容器的呈现方式有所不同
- 22
需要在Firefox和Chrome中重写以设置行高：正常！重要
- 23
在Safari上进行HTML5画布渲染-与Firefox和Chrome相比，结果很奇怪
- 24
Firefox和Chrome的不同布局
- 25
在Chrome和Safari中打印时，字体大小不同
- 26
在chrome和safari中执行不同的html代码
- 27
在Chrome和Safari中打印时，字体大小不同
- 28
为什么在Firefox，Chrome和IE中，这种方法的工作方式有所不同？
- 29
带有边框折叠的表格在Chrome和Firefox中的工作方式有所不同
我来说两句