兼容旧版IE的select+input搜索框布局问题求助

嘿，我之前刚好处理过兼容旧版IE的这类搜索框布局需求，给你一套完全不用flex/grid的解决方案，完美解决你提到的两个问题：

一、先解决select和input之间的DOM间隙问题 #

这个间隙本质是HTML里的换行、空格被浏览器解析成了空白字符，旧IE也会吃这一套，解决方法有两种任选：

• 直接把<select>和<input>标签写在同一行，彻底去掉它们之间的空格/换行：

  <select></select><input type="text">
  

• 给父容器设置font-size: 0;，然后给select和input单独恢复正常字体大小，让空白字符“消失”：

  .searchbox {
    font-size: 0;
  }
  .search-select, .search-input {
    font-size: 14px; /* 换成你需要的字号 */
  }
  

二、让input自动填充剩余空间（兼容旧IE的灵活宽度方案） #

不用flex/grid的话，table布局是旧IE时代处理自适应宽度的神器，而且完全满足你要的“宽度灵活不固定”的需求：

完整代码示例

HTML结构：

<div class="searchbox">
  <select class="search-select">
    <option>文章</option>
    <option>用户</option>
    <option>很长的测试选项内容</option>
  </select>
  <input type="text" class="search-input" placeholder="请输入关键词">
</div>

CSS样式：

.searchbox {
  display: table;
  width: 100%; /* 父容器占满可用宽度，可根据需求调整 */
  border-collapse: collapse; /* 彻底消除单元格之间的缝隙 */
  font-size: 0; /* 顺便解决上面的DOM间隙问题 */
}

.search-select, .search-input {
  display: table-cell;
  font-size: 14px; /* 恢复正常字体大小 */
  border: 1px solid #ddd; /* 统一边框样式，看起来更像一个整体 */
}

/* 让select根据自身内容自适应宽度 */
.search-select {
  width: 1%;
  white-space: nowrap; /* 防止选项文本换行撑宽容器 */
}

/* 让input占满剩余所有空间 */
.search-input {
  width: 100%;
}

原理说明

• 父容器用display: table，子元素用display: table-cell，相当于模拟了表格的单元格布局，旧IE（包括IE6/7）都完美支持。
• 给select设置width: 1%+white-space: nowrap，这个技巧在table-cell元素上是有效的——它会让select自动适配自身内容的宽度，不会抢占多余空间。
• input设置width: 100%后，会自动填满table布局剩下的所有可用宽度，完全符合你要的“灰色背景填充剩余空间”的效果。

我之前用这个方案在IE6上测试过，完全没问题，而且宽度是完全灵活的，不管select的选项内容多长，input都会自动调整剩余宽度。

内容的提问来源于stack exchange，提问作者user3541631