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

Question

JsFiddle:http://jsfiddle.net/7yfLLkds/

/*  SECTIONS  */

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
  height: auto;
  overflow: hidden;
  width: 100%;
}
/*  COLUMN SETUP  */

.col {
  /*display: block;*/
  /*float:left;*/
  display: inline-block;
  margin: 1% 0 1% 0;
}
.col:first-child {
  margin-left: 0;
}
/*  GROUPING  */

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  zoom: 1;
  /* For IE 6/7 */
}
.span_smaller {
  width: 39%;
  word-wrap: break-word;
}
.onlySmallPadTop {
  padding: 5% 0 0 0;
}
.styledFromDirHolder {
  height: 30px;
  width: calc(90% + 5px);
  position: relative;
  display: inline-block;
  padding-left: 2%;
}
.styledTBFromDir {
  width: 100%;
  height: 100%;
  padding-right: 12%;
  padding-left: 5px;
  background: #E8E8E8;
  opacity: 1;
  box-shadow: 0px 5px #BBB, 0px 8px 10px rgba(148, 148, 148, 0.5);
  box-sizing: border-box;
}
.styledFromDirGeoLoc {
  height: 100%;
  width: 10%;
  background: url('../theImages/geoLoc.png') no-repeat 50% 50%;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  background-size: auto;
}
.styledFromDirGeoLoc:hover {
  background: url('../theImages/geoLoc2.png') no-repeat 50% 50%;
}
.percPadLeft {
  padding: 0 0 0 2%;
}
.styledTB {
  padding-left: 5px;
  background: #E8E8E8;
  opacity: 1;
  border: none;
  outline: none;
  right: 35px;
  box-shadow: 0px 5px #BBB, 0px 8px 10px rgba(148, 148, 148, 0.5);
}
.searchBDir {
  height: 30px;
  width: 90%;
}
.styledBtn {
  border: 0;
  background: #EA772B;
  display: block;
  box-shadow: 0px 5px #BC490A, 0px 8px 10px rgba(148, 148, 148, 0.5);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.styledBtn:hover {
  background: #00599B;
  box-shadow: 0px 5px #01355D, 0px 8px 10px rgba(148, 148, 148, 0.5);
}
.styleDirection {
  font-size: 12px;
  padding: 0 8px 0 8px;
  height: 30px;
  line-height: 30px;
  color: #FFF;
}

<div class="section group">
  <div class="col span_smaller onlySmallPadTop">
    <span>From:</span>
    <br />
    <div class="styledFromDirHolder">
      <input type="text" id="fromAdd" class="styledTBFromDir" />
      <span id="btnGeo" title="Get My Location" class="styledFromDirGeoLoc"></span>
    </div>
  </div>
  <div class="col span_smaller onlySmallPadTop">
    <span>To:</span>
    <br />
    <span class="percPadLeft"></span>
    <input type="text" id="toAdd" class="styledTB searchBDir" />
  </div>
  <div class="col onlySmallPadTop">
    <span></span>
    <br />
    <input type="button" id="dirBtn" class="styledBtn styleDirection lightLinks" value="Get Directions" />
  </div>
</div>

在 Chrome 和 IE 11 中，它可以正确显示，但在 Firefox 中，按钮位于下方。

Answer 1

将 vertical-align: middle; 添加到 .col 中，它应该可以解决您的问题

Updated fiddle

因为您的按钮上方的跨度中没有任何文本，所以按钮 div 的计算高度似乎小于其他 div(放入一些文本，它也会解决问题)并且默认情况下内联- block 元素与基线垂直对齐(这就是为什么你的按钮 div 较低)。