html – 在处理内联块元素时,为什么Gecko和Blink中的高度计算不一致？

概述如下所示,Gecko和Blink对不同的内联块元素执行不一致的高度计算,即使它们都具有相同的css类.好像(* pause *)Trident是唯一能够让它正确的布局引擎. 我忘了(重新)设置房产吗？ 此外,正如您在此fiddle中所看到的,如果我将填充从.3em更改为1em Blink按预期进行渲染.所有元素都具有相同的高度.但壁虎仍然“破碎”. 有谁知道为什么会这样,以及如何解决它？ <a> 如下所示,Gecko和Blink对不同的内联块元素执行不一致的高度计算,即使它们都具有相同的CSS类.好像(* pause *)TrIDent是唯一能够让它正确的布局引擎.

我忘了(重新)设置房产吗？

此外,正如您在此fiddle中所看到的,如果我将填充从.3em更改为1em Blink按预期进行渲染.所有元素都具有相同的高度.但壁虎仍然“破碎”.

有谁知道为什么会这样,以及如何解决它？

<a> <button> <input> <span>

Gecko(firefox v.39.0)

Blink(谷歌浏览器v.43.0.2357.132米)：

TrIDent(Internet Explorer v.11.0.9600.17843)：

body {    Font: normal 15px arial;    padding: 1em;}.button {    background: #444444;    border: none;    Box-sizing: content-Box;    color: #ffffff;    cursor: pointer;    display: inline-block;    Font-family: arial;    Font-size: 1em;    height: auto;    line-height: normal;    margin: 0;    min-height: 1em;    padding: .3em;    text-decoration: none;}

<a  href="#">button</a><button >button</button><input  type="button" value="button" /><span >button</span>

解决方法 对于Gecko(firefox),它是由于:: moz-focus-inner与表单元素的边界.如果你注意到,表单元素(输入和按钮)总是比其他元素宽~2px.

要解决此问题,请始终将其添加到CSS中(作为重置的一部分)：

button::-moz-focus-inner{    border:0;    padding:0;    margin-top:-2px;    margin-bottom:-2px;}input::-moz-focus-inner{    border:0;    padding:0;    margin-top:-2px;    margin-bottom:-2px;}

负边距是必要的,以便字体在行高中“正确”显示.您可能需要调整值以适合您的行高,但这些值大多数都可以正常工作.

对于Blink(Chrome),元素实际上是相同的大小,但唯一的问题是它们“错位”.您会注意到,有时在内联块设置中,表单元素的显示略低于其他元素.要解决它,只需确保它们都使用相同的垂直对齐方式,例如：

display: inline-block;vertical-align: top;

将上述两个属性声明在一起总是一个好习惯 – 如果指定了内联块,请始终记住指定垂直对齐,以防止错位.

总结

以上是内存溢出为你收集整理的html – 在处理内联块元素时,为什么Gecko和Blink中的高度计算不一致？全部内容，希望文章能够帮你解决html – 在处理内联块元素时,为什么Gecko和Blink中的高度计算不一致？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。