button在高度计算上始终使用了Quirks模式。在Quirks模式下,边框的计算是在元素的宽度内的,而不像标准模式一样计算在外部。button的高度包含边框的高度,而文本框text则不包含边框高度。这就导致input高度会比button高两像素。
/* 方法一: 还是会有2个像素的差距*/ input.search-input { vertical-align: middle; height: 25px; } button.search-button { vertical-align: middle; height: 25px; }
使用以上方式还是会有两个像素对不齐
方法二:
input.search-input { height: 25px; } button.search-button { box-sizing: content-box; height: 25px; vertical-align: middle; }
在相同高的前提下,给button设置,box-sizing: content-box;vertical-align: middle;就可以直接对齐,
转载联系作者并注明出处:https://www.focusonseo.cn/cassas/151.html