Html 为什么按钮与文本框的垂直位置不匹配

JsFiddle：

/*部分*/ .科{ 明确：两者皆有； 填充：0px； 边际：0px； 高度：自动； 溢出：隐藏； 宽度：100%； } /*列设置*/ 上校{ /*显示：块*/ /*浮动：左*/ 显示：内联块； 利润率：1%01%0； } 上校：第一个孩子{ 左边距：0； } /*分组*/ .小组：之前， .小组：之后{ 内容：； 显示：表格； } .小组：之后{ 明确：两者皆有； } .组{ 缩放：1； /*对于IE 6/7*/ } .span_更小{ 宽度：39%； 单词包装：打断单词； } .只有一个挂件{ 填充：5%0； } .styledFromDirHolder{ 高度：30px； 宽度：calc90%+5px； 位置：相对位置； 显示：内联块； 左：2%； } .styledTBFromDir{ 宽度：100%； 身高：100%； 右：12%； 左侧填充：5px； 背景：E8E8E8； 不透明度：1； 盒影：0px 5px BBB，0px 8px 10px RGBA1481481481480.5； 框大小：边框框； } .styledFromDirGeoLoc{ 身高：100%； 宽度：10%； 背景：url'../theImages/geoLoc.png'不重复50%50%； 位置：绝对位置； 排名：0； 右：0； 光标：指针； 背景尺寸：自动； } .styledFromDirGeoLoc:悬停{ 背景：url'../theImages/geoLoc2.png'不重复50%50%； } percPadLeft先生{ 填充：0.2%； } .styledTB{ 左侧填充：5px； 背景：E8E8E8； 不透明度：1； 边界：无； 大纲：无； 右：35px； 盒影：0px 5px BBB，0px 8px 10px RGBA1481481481480.5； } .searchBDir{ 高度：30px； 宽度：90%； } .styledBtn{ 边界：0； 背景：EA772B； 显示：块； 盒影：0px 5px BC490A，0px 8px 10px RGBA1481481480.5； 文本对齐：居中； 垂直对齐：中间对齐； 光标：指针； } .styledBtn:悬停{ 背景：00599B； 盒影：0px 5px 01355D，0px 8px 10px RGBA1481481480.5； } .styleDirection{ 字体大小：12px； 填充：0 8px 0 8px； 高度：30px； 线高：30px； 颜色：FFF； } 发件人： 致：

---

按钮上方的断线导致出现问题。你不应该需要它，移除它并应用一个边距或可能的位置：相对；顶部：10px；或类似于按钮，以实现跨浏览器的一致体验

尽量不要对文本/段落等以外的间隔元素使用换行符，因为它们太不一致，并且使用它们不是正确的或最好的方法：

添加垂直对齐：中间；它会解决你的问题

由于按钮上方的跨度中没有任何文本，因此按钮div的计算高度似乎比其他div中放入一些文本的高度小，这也将解决问题，默认情况下，内联块元素与基线垂直对齐，这就是按钮div较低的原因

移除显示：块；属性。从.styleBtn中删除display:块

---

在Firefox中仍然存在相同的问题。@TomMarulak抱歉复制了错误的fiddle链接，再次检查谢谢。仅用于添加+1有效的解决方案。